|
@@ -9,40 +9,15 @@
|
|
|
trigger="hover"
|
|
|
placement="right"
|
|
|
width="960">
|
|
|
- <div style="margin-bottom: 10px">
|
|
|
- <div>
|
|
|
- <img src="../../assets/images/rectangle.png" height="12">
|
|
|
- <span>某某系统</span></div>
|
|
|
- <div class="sys">
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶 <b></b></span>
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div slot="reference" class="classification">
|
|
|
+ <p class="name">给排水专业—WS</p>
|
|
|
+ <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
|
|
|
</div>
|
|
|
- <div style="margin-bottom: 10px">
|
|
|
- <div>
|
|
|
+ <div>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
<img src="../../assets/images/rectangle.png" height="12">
|
|
|
- <span>某某系统</span></div>
|
|
|
+ <span>某某系统</span>
|
|
|
+ </div>
|
|
|
<div class="sys">
|
|
|
<span @click="handleDetail">燃气石油气瓶</span>
|
|
|
<span @click="handleDetail">燃气石油气瓶</span>
|
|
@@ -51,33 +26,37 @@
|
|
|
<span @click="handleDetail">燃气石油气瓶</span>
|
|
|
<span @click="handleDetail">燃气石油气瓶</span>
|
|
|
<span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div slot="reference" class="classification">
|
|
|
- <p class="name">给排水专业—WS</p>
|
|
|
- <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
|
|
|
- </div>
|
|
|
</el-popover>
|
|
|
<el-popover
|
|
|
trigger="hover"
|
|
|
placement="right"
|
|
|
width="960">
|
|
|
- <div style="margin-bottom: 10px">
|
|
|
- <img src="../../assets/images/rectangle.png" height="12">
|
|
|
- <span>某某系统</span></div>
|
|
|
- <div class="sys">
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
- </div>
|
|
|
<div slot="reference" class="classification">
|
|
|
<p class="name">给排水专业—WS</p>
|
|
|
<p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <img src="../../assets/images/rectangle.png" height="12">
|
|
|
+ <span>某某系统</span>
|
|
|
+ </div>
|
|
|
+ <div class="sys">
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ <span @click="handleDetail">燃气石油气瓶</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</el-popover>
|
|
|
|
|
|
</div>
|
|
@@ -89,126 +68,107 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import sagaBrand from "@/components/brand/sagaBrand"
|
|
|
-
|
|
|
- export default {
|
|
|
- name: "productBrand",
|
|
|
- components: {
|
|
|
- sagaBrand,
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleDetail() {
|
|
|
- this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
|
|
|
- }
|
|
|
+import sagaBrand from "@/components/brand/sagaBrand"
|
|
|
+export default {
|
|
|
+ name: "productBrand",
|
|
|
+ components: {
|
|
|
+ sagaBrand,
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ handleDetail() {
|
|
|
+ this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- @bgc: #fff;
|
|
|
- .saga-product {
|
|
|
- /*width: 1200px;*/
|
|
|
- /*margin: 20px auto 0 auto;*/
|
|
|
- margin-top: 90px;
|
|
|
-
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .sidebar {
|
|
|
- /*margin-top: 20px;*/
|
|
|
- width: 200px;
|
|
|
+@bgc: #fff;
|
|
|
+.saga-product {
|
|
|
+ /*width: 1200px;*/
|
|
|
+ /*margin: 20px auto 0 auto;*/
|
|
|
+ margin-top: 90px;
|
|
|
+ display: flex;
|
|
|
+ .sidebar {
|
|
|
+ /*margin-top: 20px;*/
|
|
|
+ width: 200px;
|
|
|
+ background: @bgc;
|
|
|
+ display: inline-block;
|
|
|
+ .title {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ background: #CBDFFC;
|
|
|
+ color: #3A8DDE;
|
|
|
+ padding-left: 10px;
|
|
|
+ }
|
|
|
+ .product-classification {
|
|
|
background: @bgc;
|
|
|
- display: inline-block;
|
|
|
-
|
|
|
- .title {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- background: #CBDFFC;
|
|
|
- color: #3A8DDE;
|
|
|
- padding-left: 10px;
|
|
|
+ /*margin-top: -19px;*/
|
|
|
+ .classification {
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #EFF0F1;
|
|
|
+ .name {
|
|
|
+ color: #1F2429;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .introduce {
|
|
|
+ color: #8D9399;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .product-classification {
|
|
|
- background: @bgc;
|
|
|
- /*margin-top: -19px;*/
|
|
|
-
|
|
|
- .classification {
|
|
|
- cursor: pointer;
|
|
|
- padding: 20px;
|
|
|
- border-bottom: 1px solid #EFF0F1;
|
|
|
-
|
|
|
- .name {
|
|
|
- color: #1F2429;
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .introduce {
|
|
|
- color: #8D9399;
|
|
|
- line-height: 20px;
|
|
|
- }
|
|
|
+ .classification:hover {
|
|
|
+ background: #E1F2FF;
|
|
|
+ .name {
|
|
|
+ color: #3A8DDE;
|
|
|
}
|
|
|
-
|
|
|
- .classification:hover {
|
|
|
- background: #E1F2FF;
|
|
|
-
|
|
|
- .name {
|
|
|
- color: #3A8DDE;
|
|
|
- }
|
|
|
-
|
|
|
- .introduce {
|
|
|
- color: #3A8DDE;
|
|
|
- }
|
|
|
+ .introduce {
|
|
|
+ color: #3A8DDE;
|
|
|
}
|
|
|
-
|
|
|
- .sys {
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- span {
|
|
|
- margin: 0 20px;
|
|
|
- color: #8D9399;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .sys {
|
|
|
+ padding: 10px;
|
|
|
+ span {
|
|
|
+ margin: 0 20px;
|
|
|
+ color: #8D9399;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .brand {
|
|
|
- width: 980px;
|
|
|
- margin-left: 20px;
|
|
|
- background: @bgc;
|
|
|
- flex-grow: 1;
|
|
|
- }
|
|
|
}
|
|
|
+ .brand {
|
|
|
+ width: 980px;
|
|
|
+ margin-left: 20px;
|
|
|
+ background: @bgc;
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
- .el-popover {
|
|
|
- p:first-child {
|
|
|
- /*border-left: 4px solid #3A8DDE;*/
|
|
|
- color: #1F2329;
|
|
|
- text-indent: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .sys {
|
|
|
- margin-left: 6px;
|
|
|
- span {
|
|
|
- /*text-indent: 6px;*/
|
|
|
+.el-popover {
|
|
|
+ p:first-child {
|
|
|
+ /*border-left: 4px solid #3A8DDE;*/
|
|
|
+ color: #1F2329;
|
|
|
+ text-indent: 8px;
|
|
|
+ }
|
|
|
+ .sys {
|
|
|
+ margin-left: 6px;
|
|
|
+ span {
|
|
|
+ /*text-indent: 6px;*/
|
|
|
+ display: inline-block;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #8D9399;
|
|
|
+ line-height: 25px;
|
|
|
+ margin-right: 40px;
|
|
|
+ b {
|
|
|
display: inline-block;
|
|
|
- cursor: pointer;
|
|
|
- color: #8D9399;
|
|
|
- line-height: 25px;
|
|
|
- margin-right: 40px;
|
|
|
-
|
|
|
- b {
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- }
|
|
|
-
|
|
|
+ width: 20px;
|
|
|
}
|
|
|
|
|
|
- span:hover {
|
|
|
- color: #3A8DDE
|
|
|
- }
|
|
|
+ }
|
|
|
+ span:hover {
|
|
|
+ color: #3A8DDE
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|