css

src/views/Store/list.vue

@@ -56,44 +56,34 @@
           </el-table-column>
           <el-table-column prop="stock" label="库存数量" width="150">
           </el-table-column>
-          <el-table-column prop="cn_ladder_price" label="国内含税价（￥）" width="140">
-            <template slot-scope="scope" v-if="scope.row.cn_ladder_price&&scope.row.cn_ladder_price.length>0">
+          <el-table-column prop="cn_ladder_price" label="国内含税价（￥）" width="130" align="center">
+            <template slot-scope="scope" v-if="scope.row.cn_ladder_price && scope.row.cn_ladder_price.length>0">
               <div class="price-more">
-                <el-tooltip placement="bottom" effect="light">
-                  <div slot="content">
+                <el-popover effect="light" trigger="hover" placement="bottom-start" popper-class="popper-class-box">
                   <div class="boxxrth2021">
                     <p class="clr" v-for="item in scope.row.cn_ladder_price">
                       <span class="fl">{{ item.purchases }}+</span>
                       <span class="fl">&yen;{{ item.price }}</span>
                     </p>
-
-                    </div>
                   </div>
-                  <div class="more-search-btn">查看更多</div>
-                </el-tooltip>
+                  <div slot="reference" class="more-search-btn" style="margin: 0 auto;">查看更多</div>
+                </el-popover>
               </div>
-
-
             </template>
           </el-table-column>
-          <el-table-column prop="hk_ladder_price" label="香港交货价（＄）" width="150">
+          <el-table-column prop="hk_ladder_price" label="香港交货价（＄）" width="120" align="center">
             <template slot-scope="scope" v-if="scope.row.hk_ladder_price&&scope.row.hk_ladder_price.length>0">
               <div class="price-more">
-                <el-tooltip placement="bottom" effect="light">
-                  <div slot="content">
+                <el-popover effect="light" trigger="hover" placement="bottom-start" popper-class="popper-class-box">
                   <div class="boxxrth2021">
                     <p class="clr" v-for="item in scope.row.hk_ladder_price">
                       <span class="fl">{{ item.purchases }}+</span>
                       <span class="fl">${{ item.price }}</span>
                     </p>
-
-                    </div>
                   </div>
-                  <div class="more-search-btn">查看更多</div>
-                </el-tooltip>
+                  <div slot="reference" class="more-search-btn" style="margin: 0 auto;">查看更多</div>
+                </el-popover>
               </div>
-
-
             </template>
           </el-table-column>
           <el-table-column prop="cn_delivery_time" label="大陆交期" width="150">
@@ -114,7 +104,6 @@
       <el-dialog title="修改库存" :visible.sync="dialogVisible" width="900px">
         <div class="kc-mask">
           <el-table :data="kucundata" border max-height="600">
-
             <el-table-column prop="goods_name" label="型号" min-width="25%">
             </el-table-column>
             <el-table-column prop="brand_name" label="品牌" min-width="25%">
@@ -123,9 +112,7 @@
             </el-table-column>
             <el-table-column label="修改库存" min-width="25%">
               <template slot-scope="scope">
-
-                <el-input v-model="scope.row.updateStock" placeholder="点击修改"
-                          onkeyup="if(event.keyCode !=37 &amp;&amp; event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}">
+                <el-input v-model="scope.row.updateStock" placeholder="点击修改" onkeyup="if(event.keyCode !=37 &amp;&amp; event.keyCode != 39){if (!/^[\d]+$/ig.test(this.value)){this.value='';}}">
                 </el-input>
               </template>
             </el-table-column>
@@ -174,7 +161,6 @@
           <el-button type="primary" @click="submitHq">确 定</el-button>
         </span>
       </el-dialog>
-
     </div>
     <Menu/>
   </div>
@@ -183,11 +169,11 @@
 <script>
 import Vue from 'vue';
 import Menu from "@/components/menu.vue";
-import {Autocomplete, Button, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, Option, Pagination, Select, Table, TableColumn, Tooltip} from 'element-ui'
+import {Autocomplete, Button, DatePicker, Dialog, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Message, Option, Pagination, Popover, Select, Table, TableColumn, Tooltip} from 'element-ui'
 
 Vue.prototype.$message = Message
 Vue.use(Button).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete)
-Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination)
+Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Popover)
 export default {
   name: "list",