Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
c250d7aa 1 parent 9598425d

产品中心二级目录显示完善

Inline Side-by-side
Showing 3 changed files with 82 additions and 43 deletions
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:36:06 2 * @Date: 2024-09-26 13:36:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-29 14:33:50 4 + * @LastEditTime: 2024-09-30 14:01:41
5 * @FilePath: /hager/src/App.vue 5 * @FilePath: /hager/src/App.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -50,9 +50,6 @@ body { ...@@ -50,9 +50,6 @@ body {
50 } 50 }
51 } 51 }
52 52
53 -body {
54 -}
55 -
56 .global-center { 53 .global-center {
57 position: relative; 54 position: relative;
58 top: 50%; 55 top: 50%;
......
1 <!-- 1 <!--
2 * @Date: 2024-09-26 13:42:11 2 * @Date: 2024-09-26 13:42:11
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-30 11:31:26 4 + * @LastEditTime: 2024-09-30 11:34:14
5 * @FilePath: /hager/src/components/common/hagerHeader.vue 5 * @FilePath: /hager/src/components/common/hagerHeader.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -398,6 +398,7 @@ export default { ...@@ -398,6 +398,7 @@ export default {
398 align-items: center; 398 align-items: center;
399 justify-content: space-around; 399 justify-content: space-around;
400 .item { 400 .item {
401 + color: @secondary-color;
401 &:hover { 402 &:hover {
402 cursor: pointer; 403 cursor: pointer;
403 } 404 }
......
1 <!-- 1 <!--
2 * @Date: 2024-09-27 16:53:09 2 * @Date: 2024-09-27 16:53:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-09-27 18:07:10 4 + * @LastEditTime: 2024-09-30 14:00:01
5 * @FilePath: /hager/src/views/product/index.vue 5 * @FilePath: /hager/src/views/product/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -15,24 +15,21 @@ ...@@ -15,24 +15,21 @@
15 <el-breadcrumb-item>低压主配电</el-breadcrumb-item> 15 <el-breadcrumb-item>低压主配电</el-breadcrumb-item>
16 </el-breadcrumb> 16 </el-breadcrumb>
17 </div> 17 </div>
18 - <div> 18 + <hager-h1 title="低压主配电" sub="Automatic conversion switch" style="margin: 2rem 0;"></hager-h1>
19 - <p>低压主配电</p>
20 - <p>Automatic conversion switch</p>
21 - </div>
22 <el-row :gutter="0" style="margin: 1rem 0;"> 19 <el-row :gutter="0" style="margin: 1rem 0;">
23 - <el-col :span="8"> 20 + <el-col :span="6">
24 - <div style="border: 1px solid #eee; border-radius: 5px; padding: 10px; margin-right: 1rem;"> 21 + <div class="product-nav-wrapper">
25 - <div>按产品类别查找</div> 22 + <div class="product-nav-title">按产品类别查找</div>
26 - <el-input placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input> 23 + <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
27 <el-collapse v-model="activeNames" @change="handleChange"> 24 <el-collapse v-model="activeNames" @change="handleChange">
28 <el-collapse-item title="低压主配电" name="1"> 25 <el-collapse-item title="低压主配电" name="1">
29 - <div>acb hw01 空气断路器</div> 26 + <div class="p-item">acb hw01 空气断路器</div>
30 - <div>unimes（优跃）开关柜</div> 27 + <div class="p-item">unimes（优跃）开关柜</div>
31 - <div>unimes（优跃）面板开关</div> 28 + <div class="p-item">unimes（优跃）面板开关</div>
32 - <div>acb hw04 空气断路器</div> 29 + <div class="p-item">acb hw04 空气断路器</div>
33 - <div>acb hwo5 空气断路器</div> 30 + <div class="p-item">acb hwo5 空气断路器</div>
34 - <div>acb hw06 空气断路器</div> 31 + <div class="p-item">acb hw06 空气断路器</div>
35 - <div>acb hwo7 空气断路器</div> 32 + <div class="p-item">acb hwo7 空气断路器</div>
36 </el-collapse-item> 33 </el-collapse-item>
37 <el-collapse-item title="分配电" name="2"> 34 <el-collapse-item title="分配电" name="2">
38 </el-collapse-item> 35 </el-collapse-item>
...@@ -47,27 +44,16 @@ ...@@ -47,27 +44,16 @@
47 </el-collapse> 44 </el-collapse>
48 </div> 45 </div>
49 </el-col> 46 </el-col>
50 - <el-col :span="16"> 47 + <el-col :span="18">
51 - <el-row :gutter="10"> 48 + <div class="product-list">
52 - <el-col :span="8"> 49 + <div class="product-item" v-for="(item, index) in 6" :key="index">
53 - <div> 50 + <div class="product-item-img">
54 - <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image> 51 + <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
55 - <p>acb hw 空气断路器</p>
56 - </div>
57 - </el-col>
58 - <el-col :span="8">
59 - <div>
60 - <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
61 - <p>acb hw 空气断路器</p>
62 - </div>
63 - </el-col>
64 - <el-col :span="8">
65 - <div>
66 - <el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
67 - <p>acb hw 空气断路器</p>
68 </div> 52 </div>
69 - </el-col> 53 + <p class="product-item-title">acb hw 空气断路器</p>
70 - </el-row> 54 + </div>
55 + </div>
56 + <div style="height: 5rem;"></div>
71 </el-col> 57 </el-col>
72 </el-row> 58 </el-row>
73 </hager-box> 59 </hager-box>
...@@ -77,9 +63,10 @@ ...@@ -77,9 +63,10 @@
77 <script> 63 <script>
78 import mixin from 'common/mixin'; 64 import mixin from 'common/mixin';
79 import hagerBox from '@/components/common/hagerBox'; 65 import hagerBox from '@/components/common/hagerBox';
66 +import hagerH1 from '@/components/common/hagerH1.vue';
80 67
81 export default { 68 export default {
82 - components: { hagerBox }, 69 + components: { hagerBox, hagerH1 },
83 mixins: [mixin.init], 70 mixins: [mixin.init],
84 data () { 71 data () {
85 return { 72 return {
...@@ -98,8 +85,62 @@ export default { ...@@ -98,8 +85,62 @@ export default {
98 } 85 }
99 </script> 86 </script>
100 87
101 -<style lang="less" scoped> 88 +<style lang="less">
102 .product-index { 89 .product-index {
90 + .product-nav-wrapper {
91 + border: 1px solid #eee;
92 + border-radius: 5px;
93 + padding: 1.5rem;
94 + margin-right: 1rem;
95 + .product-nav-title {
96 + color: @secondary-color;
97 + font-weight: bold;
98 + font-size: 1.15rem;
99 + margin-bottom: 0.5rem;
100 + }
101 + }
102 + }
103 103
104 + .el-collapse {
105 + border-top: 0;
104 } 106 }
107 + .el-collapse-item {
108 + .el-collapse-item__header {
109 + font-size: 0.9rem;
110 + }
111 + .p-item {
112 + &:hover {
113 + cursor: pointer;
114 + text-decoration: underline;
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 + }
127 + .product-item-img {
128 + background-color: #f5f5f5;
129 + display: flex;
130 + align-items: center;
131 + justify-content: center;
132 + height: 18rem;
133 + padding: 3rem;
134 + box-sizing: border-box;
135 + border-radius: 8px;
136 + }
137 + .product-item-title {
138 + text-align: center;
139 + margin-top: 0.75rem;
140 + color: @secondary-color;
141 + &:hover {
142 + cursor: pointer;
143 + text-decoration: underline;
144 + }
145 + }
105 </style> 146 </style>
......