'列表页样式调整'

src/pages/productQuery/product-list.vue

@@ -24,9 +24,18 @@
             <img src="@/assets/homePage/WechatIMG2 Copy@2x.png" alt="">
           </div>
           <div slot="content" class="item-content">
-            <div class="center"> <span class="firsts">经销商</span> <span class="seconds">{{ item.bp_name }}</span></div>
-            <div class="center"> <span class="firsts">参数项</span> <span class="seconds">{{ item.product_code }}</span></div>
-            <div class="center"> <span class="firsts">产品名称</span> <span class="seconds">{{ item.product_name }}</span></div>
+            <div class="centers">
+              <p class="firsts1">经销商</p>
+              <p class="seconds1">{{ item.bp_name }}</p>
+            </div>
+            <div class="centers">
+              <p class="firsts1">参数项</p>
+              <p class="seconds1">{{ item.product_code }}</p>
+            </div>
+            <div class="centers">
+              <p class="firsts1">产品名称</p>
+              <p class="seconds1">{{ item.product_name }}</p>
+            </div>
           </div>
           <div slot="right-icon">
             <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" @click="goDetailed(item.product_id)">
@@ -140,7 +149,7 @@ export default {
     }
     .item-pic {
           width: 110px;
-          height: 110px;
+          //height: 110px;
           img {
               width: 100%;
               height: 100%;
@@ -150,37 +159,39 @@ export default {
          // height: 102px;
           width: 100%;
           margin-left: 20px;
-          .center:nth-of-type(1) {
+          .centers:nth-of-type(1) {
               margin-top: 16px;
           }
-          .center:nth-of-type(2) {
+          .centers:nth-of-type(2) {
               margin-top: 6px;
           }
-          .center:nth-of-type(3) {
+          .centers:nth-of-type(3) {
               margin-top: 6px;
           }
-          .center {
+          .centers {
             //   margin-top: 6px;
             // white-space: nowrap;
+            // width: 100%;
               font-family: PingFangSC-Semibold;
               font-size: 13px;
               color: rgba(56,63,69,0.60);
               letter-spacing: 0.5px;
-              .firsts {
-                  display: inline-block;
-                  width: 55px;
+              display: flex;
+              flex-direction: row;
+              .firsts1 {
+                  width: 60px;
+                  height: 17px;
                   font-family: PingFangSC-Regular;
                   font-size: 13px;
                   color: rgba(56,63,69,0.60);
               }
-              .seconds {
+              .seconds1 {
+                width: 70%;
                   margin-left: 16px;
+                  height: auto;
                   font-family: PingFangSC-Regular;
                   font-size: 13px;
                   color: #383F45;
-                  // white-space: nowrap;
-                  // overflow: hidden;
-                  // text-overflow: ellipsis;
               }
           }
     }

src/pages/productQuery/query-home.vue

@@ -2,7 +2,7 @@
    * @Descrip: 查询首页
  * @Author: your name
  * @Date: 2019-10-15 14:30:00
- * @LastEditTime: 2019-10-17 13:33:48
+ * @LastEditTime: 2019-10-17 16:07:07
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -32,13 +32,8 @@
             <p class="product-class">产品线</p>
             <div class="product">
               <p>{{ item.division_n }}</p>
-              <div v-for="items in divisionList" v-if="list_flag&&item.factory_bp_id === factory_bp_id " :key="items.division" class="division-lists">
-                <div>
-                  <p @click="checkDivision(items.product_line,items.division,index)">{{ items.product_line }}</p>
-                </div>
-              </div>
             </div>
-            <img src="@/assets/productQuery/pull.png" alt="" @click="queryDivision(item.factory_bp_id)">
+            <img src="@/assets/productQuery/pull.png" alt="" @click="queryDivision(item.factory_bp_id,index)">
           </div>
           <img class="arrow" src="@/assets/productQuery/getIn.png" alt="" @click="goLists(item.division)">
         </div>
@@ -94,7 +89,7 @@ export default {
        },
      })
    },
-   queryDivision (val) {
+   queryDivision (val, ind) {
      let vm = this
      let url = $config.basePath + 'prd_product_division_list'
      let param = {
@@ -103,9 +98,26 @@ export default {
      vm.$post(url, param).then(function (res) {
        console.log(res)
        if (res.result === 'S') {
-         vm.divisionList = res.lists
-         vm.list_flag = !vm.list_flag
-         vm.factory_bp_id = val
+         vm.divisionList = res.lists.map(item => {
+           return {
+             code: item.division,
+             code_name: item.product_line,
+           }
+         })
+         //  vm.divisionList = res.lists
+         vm.hlsPopup.selectList({
+           list: vm.divisionList, // 下拉列表
+           code: 'bp_type',
+           object: {},
+           returnItem: function (index, obj) {
+             console.log('index:' + index + ',object:' + vum.toJson(obj))
+             vm.prolists[ind].division_n = obj.bp_type_n
+             vm.prolists[ind].division = obj.bp_type
+           },
+         })
+
+         //  vm.list_flag = !vm.list_flag
+         // vm.factory_bp_id = val
        } else {
          hlsPopup.showLongCenter(res.message)
        }
@@ -217,28 +229,7 @@ export default {
                 font-size: 14px;
                 color: #383F45;
                 margin-left: 16px;
-                .division-lists {
-                  width: 100%;
-                  height: auto;
-                  position: relative;
-                  z-index: 1000;
-                  border: 1px solid #ccc;
-                    border-bottom: none;
-                  // margin-top: 4px;
-                  div {
-                  background: #fff;
-                  //border: 1px solid #ccc;
-
-                  p {
-                    width: 100%;
-                    height: 24px;
-                    line-height: 24px;
-                    border-bottom: 1px solid #ccc;
-                    // text-align: center
-                  }
-                  }
                 }
-            }
             img {
                 width: 16px;
                 height: 16px;