sagaProduct.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. <template>
  2. <div class="saga-product">
  3. <div class="sidebar">
  4. <div class="title">
  5. <span class="iconfont iconfenlei"></span>&nbsp;产品分类
  6. </div>
  7. <div class="product-classification">
  8. <el-popover
  9. trigger="hover"
  10. placement="right"
  11. v-for="major in productType"
  12. :key="major.Code"
  13. width="960">
  14. <div slot="reference" class="classification">
  15. <div class="major-content">
  16. <p class="name">{{`${major.Name} — ${major.Code}`}}</p>
  17. <p class="introduce">{{major.Note}}</p>
  18. </div>
  19. </div>
  20. <div v-for="system in major.DefMajor" :key="system.Code" v-show="major.DefMajor && major.DefMajor.length">
  21. <div style="margin-bottom: 10px">
  22. <img src="../../assets/images/rectangle.png" height="12">
  23. <span>{{system.Name}}</span>
  24. </div>
  25. <div class="sys" v-show="system.DefClass && system.DefClass.length">
  26. <span
  27. v-for="equip in system.DefClass"
  28. :key="equip.Code"
  29. @click="handleDetail(equip)"
  30. >
  31. {{equip.Name}}
  32. </span>
  33. </div>
  34. </div>
  35. </el-popover>
  36. </div>
  37. </div>
  38. <div class="brand">
  39. <saga-brand pageType="product"></saga-brand>
  40. </div>
  41. </div>
  42. </template>
  43. <script>
  44. import sagaBrand from "@/components/brand/sagaBrand"
  45. import { dictionDefMajor } from "@/api/dictionary"
  46. import { mapGetters } from "vuex"
  47. export default {
  48. name: "productBrand",
  49. components: {
  50. sagaBrand,
  51. },
  52. created() {
  53. this.getProductType()
  54. },
  55. data() {
  56. return {
  57. productType: []
  58. }
  59. },
  60. computed: {
  61. ...mapGetters('layout', ['dictionary']),
  62. },
  63. methods:{
  64. handleDetail(item) {
  65. this.$router.push({path: 'product/productDetail', query: {id: '1', name: '2', productId: '3'}})
  66. },
  67. getProductType() {// 获取产品类型数据
  68. let params = {
  69. Type: this.dictionary.dictionaryType,
  70. GroupId: this.dictionary.groupId,
  71. ProjectId: this.dictionary.projectId,
  72. }
  73. dictionDefMajor(params, res => {
  74. this.productType = res.Content
  75. })
  76. }
  77. }
  78. }
  79. </script>
  80. <style scoped lang="less">
  81. @bgc: #fff;
  82. .saga-product {
  83. /*width: 1200px;*/
  84. /*margin: 20px auto 0 auto;*/
  85. margin-top: 90px;
  86. display: flex;
  87. .sidebar {
  88. /*margin-top: 20px;*/
  89. width: 200px;
  90. background: @bgc;
  91. display: inline-block;
  92. .title {
  93. height: 40px;
  94. line-height: 40px;
  95. background: #CBDFFC;
  96. color: #3A8DDE;
  97. padding-left: 10px;
  98. }
  99. .product-classification {
  100. background: @bgc;
  101. /*margin-top: -19px;*/
  102. .classification {
  103. cursor: pointer;
  104. .major-content{
  105. padding: 12px 0;
  106. margin: 0 16px;
  107. border-bottom: 1px solid #EFF0F1;
  108. .name {
  109. font-size: 14px;
  110. line-height: 22px;
  111. color: #1F2429;
  112. margin-bottom: 4px;
  113. }
  114. .introduce {
  115. color: #8D9399;
  116. font-size: 12px;
  117. letter-spacing: 0.5px;
  118. line-height: 18px;
  119. }
  120. }
  121. }
  122. .classification:hover {
  123. background: #E1F2FF;
  124. .name {
  125. color: #3A8DDE;
  126. }
  127. .introduce {
  128. color: #3A8DDE;
  129. }
  130. }
  131. .sys {
  132. padding: 10px;
  133. span {
  134. margin: 0 20px;
  135. color: #8D9399;
  136. display: inline-block;
  137. }
  138. }
  139. }
  140. }
  141. .brand {
  142. width: 980px;
  143. margin-left: 20px;
  144. background: @bgc;
  145. flex-grow: 1;
  146. }
  147. }
  148. </style>
  149. <style lang="less">
  150. .el-popover {
  151. p:first-child {
  152. /*border-left: 4px solid #3A8DDE;*/
  153. color: #1F2329;
  154. text-indent: 8px;
  155. }
  156. .sys {
  157. margin-left: 6px;
  158. span {
  159. /*text-indent: 6px;*/
  160. display: inline-block;
  161. cursor: pointer;
  162. color: #8D9399;
  163. line-height: 25px;
  164. margin-right: 40px;
  165. b {
  166. display: inline-block;
  167. width: 20px;
  168. }
  169. }
  170. span:hover {
  171. color: #3A8DDE
  172. }
  173. }
  174. }
  175. </style>