123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- <template>
- <div class="saga-product">
- <div class="sidebar">
- <div class="title">
- <span class="iconfont iconfenlei"></span> 产品分类
- </div>
- <div class="product-classification">
- <el-popover
- trigger="hover"
- placement="right"
- v-for="major in productType"
- :key="major.Code"
- width="960">
- <div slot="reference" class="classification">
- <div class="major-content">
- <p class="name">{{`${major.Name} — ${major.Code}`}}</p>
- <p class="introduce">{{major.Note}}</p>
- </div>
- </div>
- <div v-for="system in major.DefMajor" :key="system.Code" v-show="major.DefMajor && major.DefMajor.length">
- <div style="margin-bottom: 10px">
- <img src="../../assets/images/rectangle.png" height="12">
- <span>{{system.Name}}</span>
- </div>
- <div class="sys" v-show="system.DefClass && system.DefClass.length">
- <span
- v-for="equip in system.DefClass"
- :key="equip.Code"
- @click="handleDetail(equip)"
- >
- {{equip.Name}}
- </span>
- </div>
- </div>
- </el-popover>
- </div>
- </div>
- <div class="brand">
- <saga-brand pageType="product"></saga-brand>
- </div>
- </div>
- </template>
- <script>
- import sagaBrand from "@/components/brand/sagaBrand"
- import { dictionDefMajor } from "@/api/dictionary"
- import { mapGetters } from "vuex"
- export default {
- name: "productBrand",
- components: {
- sagaBrand,
- },
- created() {
- this.getProductType()
- },
- data() {
- return {
- productType: []
- }
- },
- computed: {
- ...mapGetters('layout', ['dictionary']),
- },
- methods:{
- handleDetail(item) {
- this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
- },
- getProductType() {// 获取产品类型数据
- let params = {
- Type: this.dictionary.dictionaryType,
- GroupId: this.dictionary.groupId,
- ProjectId: this.dictionary.projectId,
- }
- dictionDefMajor(params, res => {
- this.productType = res.Content
- })
- }
- }
- }
- </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;
- background: @bgc;
- display: inline-block;
- .title {
- height: 40px;
- line-height: 40px;
- background: #CBDFFC;
- color: #3A8DDE;
- padding-left: 10px;
- }
- .product-classification {
- background: @bgc;
- /*margin-top: -19px;*/
- .classification {
- cursor: pointer;
- .major-content{
- padding: 12px 0;
- margin: 0 16px;
- border-bottom: 1px solid #EFF0F1;
- .name {
- font-size: 14px;
- line-height: 22px;
- color: #1F2429;
- margin-bottom: 4px;
- }
- .introduce {
- color: #8D9399;
- font-size: 12px;
- letter-spacing: 0.5px;
- line-height: 18px;
- }
- }
- }
- .classification:hover {
- background: #E1F2FF;
- .name {
- color: #3A8DDE;
- }
- .introduce {
- color: #3A8DDE;
- }
- }
- .sys {
- padding: 10px;
- span {
- margin: 0 20px;
- color: #8D9399;
- display: inline-block;
- }
- }
- }
- }
- .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;*/
- display: inline-block;
- cursor: pointer;
- color: #8D9399;
- line-height: 25px;
- margin-right: 40px;
- b {
- display: inline-block;
- width: 20px;
- }
- }
- span:hover {
- color: #3A8DDE
- }
- }
- }
- </style>
|