Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4e02ea8e 1 parent 4d44f0f6

fix

Inline Side-by-side
Showing 3 changed files with 183 additions and 2 deletions
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 21:45:14
* @FilePath: /hager/index.html
* @Description: 文件描述
-->
<!doctype html>
<html lang="en">
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
......
/*
* @Date: 2024-08-26 10:42:15
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 17:01:09
* @LastEditTime: 2024-10-20 20:57:49
* @FilePath: /hager/src/route.js
* @Description: 文件描述
*/
......@@ -15,6 +15,15 @@ export default [{
},
children: []
}, {
path: '/product/category',
name: '产品类别',
component: () => import('@/views/product/category'),
meta: {
title: '海格电器',
tag: 'product'
},
children: []
}, {
path: '/product/index',
name: '二级目录',
component: () => import('@/views/product/index'),
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-20 21:01:53
* @FilePath: /hager/src/views/product/category.vue
* @Description: 文件描述
-->
<template>
<div class="product-category">
<hager-box>
<div style="margin-top: 1.5rem;">
<el-breadcrumb separator="/">
<el-breadcrumb-item>所有产品</el-breadcrumb-item>
<el-breadcrumb-item>配电产品</el-breadcrumb-item>
</el-breadcrumb>
</div>
<hager-h1 title="配电产品" sub="Distribution Products" style="margin: 2rem 0;"></hager-h1>
<el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
<el-col :span="6">
<div class="product-nav-wrapper">
<div class="product-nav-title">按产品类别查找</div>
<el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
<div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :span="18">
<div class="product-list">
<div class="product-item" v-for="(item, index) in 6" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
</el-col>
</el-row>
<div v-else class="product-list">
<div class="product-item xs" v-for="(item, index) in 6" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
</hager-box>
</div>
</template>
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
export default {
components: { hagerBox, hagerH1 },
mixins: [mixin.init],
data () {
return {
search_input: '',
activeNames: ['1'],
c_list: [{
title: '低压主配电',
name: '1',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}, {
title: '分配电',
name: '2',
list: [{
id: '',
name: 'acb hw01 空气断路器'
}]
}]
}
},
mounted () {
},
methods: {
handleChange(val) {
console.log(val);
},
goToP (item) { // 跳转产品详情
this.$router.push({
path: '/product/detail',
query: {
// id: id
}
});
}
}
}
</script>
<style lang="less">
.product-category {
.product-nav-wrapper {
border: 1px solid #eee;
border-radius: 5px;
padding: 1.5rem;
margin-right: 1rem;
.product-nav-title {
color: @secondary-color;
font-weight: bold;
font-size: 1.15rem;
margin-bottom: 0.5rem;
}
}
.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.product-item {
width: calc(33.33% - 1rem);
&.xs {
width: calc(50% - 1rem);
}
}
.product-item-img {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
box-sizing: border-box;
border-radius: 8px;
}
.product-item-title {
text-align: center;
margin-top: 0.75rem;
color: @secondary-color;
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.el-collapse {
border-top: 0;
}
.el-collapse-item {
.el-collapse-item__header {
font-size: 0.9rem;
}
.p-item {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
</style>