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
1 +<!--
2 + * @Date: 2024-09-26 13:36:06
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-20 21:45:14
5 + * @FilePath: /hager/index.html
6 + * @Description: 文件描述
7 +-->
1 <!doctype html> 8 <!doctype html>
2 -<html lang="en"> 9 +<html lang="zh-cn">
3 <head> 10 <head>
4 <meta charset="UTF-8" /> 11 <meta charset="UTF-8" />
5 <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --> 12 <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
......
1 /* 1 /*
2 * @Date: 2024-08-26 10:42:15 2 * @Date: 2024-08-26 10:42:15
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-20 17:01:09 4 + * @LastEditTime: 2024-10-20 20:57:49
5 * @FilePath: /hager/src/route.js 5 * @FilePath: /hager/src/route.js
6 * @Description: 文件描述 6 * @Description: 文件描述
7 */ 7 */
...@@ -15,6 +15,15 @@ export default [{ ...@@ -15,6 +15,15 @@ export default [{
15 }, 15 },
16 children: [] 16 children: []
17 }, { 17 }, {
18 + path: '/product/category',
19 + name: '产品类别',
20 + component: () => import('@/views/product/category'),
21 + meta: {
22 + title: '海格电器',
23 + tag: 'product'
24 + },
25 + children: []
26 +}, {
18 path: '/product/index', 27 path: '/product/index',
19 name: '二级目录', 28 name: '二级目录',
20 component: () => import('@/views/product/index'), 29 component: () => import('@/views/product/index'),
......
1 +<!--
2 + * @Date: 2024-09-27 16:53:09
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2024-10-20 21:01:53
5 + * @FilePath: /hager/src/views/product/category.vue
6 + * @Description: 文件描述
7 +-->
8 +<template>
9 + <div class="product-category">
10 + <hager-box>
11 + <div style="margin-top: 1.5rem;">
12 + <el-breadcrumb separator="/">
13 + <el-breadcrumb-item>所有产品</el-breadcrumb-item>
14 + <el-breadcrumb-item>配电产品</el-breadcrumb-item>
15 + </el-breadcrumb>
16 + </div>
17 + <hager-h1 title="配电产品" sub="Distribution Products" style="margin: 2rem 0;"></hager-h1>
18 + <el-row v-if="!is_xs" :gutter="0" style="margin: 1rem 0;">
19 + <el-col :span="6">
20 + <div class="product-nav-wrapper">
21 + <div class="product-nav-title">按产品类别查找</div>
22 + <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
23 + <el-collapse v-model="activeNames" @change="handleChange">
24 + <el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
25 + <div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
26 + </el-collapse-item>
27 + </el-collapse>
28 + </div>
29 + </el-col>
30 + <el-col :span="18">
31 + <div class="product-list">
32 + <div class="product-item" v-for="(item, index) in 6" :key="index">
33 + <div class="product-item-img">
34 + <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
35 + </div>
36 + <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
37 + </div>
38 + </div>
39 + <div style="height: 5rem;"></div>
40 + </el-col>
41 + </el-row>
42 + <div v-else class="product-list">
43 + <div class="product-item xs" v-for="(item, index) in 6" :key="index">
44 + <div class="product-item-img">
45 + <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
46 + </div>
47 + <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
48 + </div>
49 + </div>
50 + <div style="height: 5rem;"></div>
51 + </hager-box>
52 + </div>
53 +</template>
54 +
55 +<script>
56 +import mixin from 'common/mixin';
57 +import hagerBox from '@/components/common/hagerBox';
58 +import hagerH1 from '@/components/common/hagerH1.vue';
59 +
60 +export default {
61 + components: { hagerBox, hagerH1 },
62 + mixins: [mixin.init],
63 + data () {
64 + return {
65 + search_input: '',
66 + activeNames: ['1'],
67 + c_list: [{
68 + title: '低压主配电',
69 + name: '1',
70 + list: [{
71 + id: '',
72 + name: 'acb hw01 空气断路器'
73 + }]
74 + }, {
75 + title: '分配电',
76 + name: '2',
77 + list: [{
78 + id: '',
79 + name: 'acb hw01 空气断路器'
80 + }]
81 + }]
82 + }
83 + },
84 + mounted () {
85 +
86 + },
87 + methods: {
88 + handleChange(val) {
89 + console.log(val);
90 + },
91 + goToP (item) { // 跳转产品详情
92 + this.$router.push({
93 + path: '/product/detail',
94 + query: {
95 + // id: id
96 + }
97 + });
98 + }
99 + }
100 +}
101 +</script>
102 +
103 +<style lang="less">
104 + .product-category {
105 + .product-nav-wrapper {
106 + border: 1px solid #eee;
107 + border-radius: 5px;
108 + padding: 1.5rem;
109 + margin-right: 1rem;
110 + .product-nav-title {
111 + color: @secondary-color;
112 + font-weight: bold;
113 + font-size: 1.15rem;
114 + margin-bottom: 0.5rem;
115 + }
116 + }
117 +
118 +
119 + .product-list {
120 + display: flex;
121 + flex-wrap: wrap;
122 + gap: 1rem;
123 + }
124 + .product-item {
125 + width: calc(33.33% - 1rem);
126 + &.xs {
127 + width: calc(50% - 1rem);
128 + }
129 + }
130 + .product-item-img {
131 + background-color: #f5f5f5;
132 + display: flex;
133 + align-items: center;
134 + justify-content: center;
135 + height: 18rem;
136 + padding: 3rem;
137 + box-sizing: border-box;
138 + border-radius: 8px;
139 + }
140 + .product-item-title {
141 + text-align: center;
142 + margin-top: 0.75rem;
143 + color: @secondary-color;
144 + &:hover {
145 + cursor: pointer;
146 + text-decoration: underline;
147 + }
148 + }
149 + }
150 +
151 + .el-collapse {
152 + border-top: 0;
153 + }
154 + .el-collapse-item {
155 + .el-collapse-item__header {
156 + font-size: 0.9rem;
157 + }
158 + .p-item {
159 + &:hover {
160 + cursor: pointer;
161 + text-decoration: underline;
162 + }
163 + }
164 + }
165 +</style>