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
<!--
* @Date: 2024-09-26 13:36:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-29 14:33:50
* @LastEditTime: 2024-09-30 14:01:41
* @FilePath: /hager/src/App.vue
* @Description: 文件描述
-->
......@@ -50,9 +50,6 @@ body {
}
}
body {
}
.global-center {
position: relative;
top: 50%;
......
<!--
* @Date: 2024-09-26 13:42:11
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-30 11:31:26
* @LastEditTime: 2024-09-30 11:34:14
* @FilePath: /hager/src/components/common/hagerHeader.vue
* @Description: 文件描述
-->
......@@ -398,6 +398,7 @@ export default {
align-items: center;
justify-content: space-around;
.item {
color: @secondary-color;
&:hover {
cursor: pointer;
}
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-27 18:07:10
* @LastEditTime: 2024-09-30 14:00:01
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -15,24 +15,21 @@
<el-breadcrumb-item>低压主配电</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div>
<p>低压主配电</p>
<p>Automatic conversion switch</p>
</div>
<hager-h1 title="低压主配电" sub="Automatic conversion switch" style="margin: 2rem 0;"></hager-h1>
<el-row :gutter="0" style="margin: 1rem 0;">
<el-col :span="8">
<div style="border: 1px solid #eee; border-radius: 5px; padding: 10px; margin-right: 1rem;">
<div>按产品类别查找</div>
<el-input placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
<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 title="低压主配电" name="1">
<div>acb hw01 空气断路器</div>
<div>unimes（优跃）开关柜</div>
<div>unimes（优跃）面板开关</div>
<div>acb hw04 空气断路器</div>
<div>acb hwo5 空气断路器</div>
<div>acb hw06 空气断路器</div>
<div>acb hwo7 空气断路器</div>
<div class="p-item">acb hw01 空气断路器</div>
<div class="p-item">unimes（优跃）开关柜</div>
<div class="p-item">unimes（优跃）面板开关</div>
<div class="p-item">acb hw04 空气断路器</div>
<div class="p-item">acb hwo5 空气断路器</div>
<div class="p-item">acb hw06 空气断路器</div>
<div class="p-item">acb hwo7 空气断路器</div>
</el-collapse-item>
<el-collapse-item title="分配电" name="2">
</el-collapse-item>
......@@ -47,27 +44,16 @@
</el-collapse>
</div>
</el-col>
<el-col :span="16">
<el-row :gutter="10">
<el-col :span="8">
<div>
<el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p>acb hw 空气断路器</p>
</div>
</el-col>
<el-col :span="8">
<div>
<el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p>acb hw 空气断路器</p>
</div>
</el-col>
<el-col :span="8">
<div>
<el-image src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<p>acb hw 空气断路器</p>
<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>
</el-col>
</el-row>
<p class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
</el-col>
</el-row>
</hager-box>
......@@ -77,9 +63,10 @@
<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import hagerH1 from '@/components/common/hagerH1.vue';
export default {
components: { hagerBox },
components: { hagerBox, hagerH1 },
mixins: [mixin.init],
data () {
return {
......@@ -98,8 +85,62 @@ export default {
}
</script>
<style lang="less" scoped>
<style lang="less">
.product-index {
.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;
}
}
}
.el-collapse {
border-top: 0;
}
.el-collapse-item {
.el-collapse-item__header {
font-size: 0.9rem;
}
.p-item {
&:hover {
cursor: pointer;
text-decoration: underline;
}
}
}
.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.product-item {
width: calc(33.33% - 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;
}
}
</style>
......