Ver Fonte

author:wcq
update:处理收银台响应式

wcq há 3 anos atrás
pai
commit
4a5e19e32c
1 ficheiros alterados com 54 adições e 18 exclusões
  1. 54 18
      kmall-admin/src/main/webapp/WEB-INF/page/sale/sale.html

+ 54 - 18
kmall-admin/src/main/webapp/WEB-INF/page/sale/sale.html

@@ -14,22 +14,49 @@
             #goodsImg{
                 width: 50%;
             }
+            #logoImg{
+                width: 100%;
+            }
+            #tableLi{
+                min-height: 295px;
+            }
+            #codediv{
+                min-height: 455px;
+            }
         }
         @media screen and (min-width: 1396px) and (max-width: 1536px) {
             #rrapp {
-                font-size: 0.2rem;
+                font-size: 0.1rem;
             }
             #goodsImg{
                 width: 50%;
             }
+            #logoImg{
+                width: 90%;
+            }
+            #tableLi{
+                min-height: 350px;
+            }
+            #codediv{
+                min-height: 520px;
+            }
         }
         @media screen and (min-width: 1536px) and (max-width: 1920px) {
             #rrapp {
-                font-size: 0.5rem;
+                font-size: 0.1rem;
             /*//我这里是按1920的屏幕宽度设置的,所以1rem相当于100px*/
             }
             #goodsImg{
-                width: 75%;
+                width: 50%;
+            }
+            #logoImg{
+                width: 80%;
+            }
+            #tableLi{
+                min-height: 380px;
+            }
+            #codediv{
+                min-height: 555px;
             }
         }
         @media screen and (min-width: 1920px) {
@@ -37,7 +64,16 @@
                 font-size: 0.1rem;
             }
             #goodsImg{
-                width: 100%;
+                width: 40%;
+            }
+            #logoImg{
+                width: 75%;
+            }
+            #tableLi{
+                min-height: 513px;
+            }
+            #codediv{
+                min-height: 712px;
             }
         }
 
@@ -143,13 +179,13 @@
             <div class="row" style="border:0;margin-bottom:10px">
                 <div class="col-md-3 col-sm-6 logodiv">
                     <!--center-block-->
-                    <img src="${rc.contextPath}/statics/img/logotest2.jpg" class="img-rounded img-responsive" style="height: 70px;">
+                    <img id="logoImg" src="${rc.contextPath}/statics/img/logotest2.jpg" class="img-rounded img-responsive" style="height: 70px;">
                 </div>
                 <div class="col-md-9 col-sm-6" style="background-color: #f0f0f0;margin:0px;padding: 0px" >
                     <div v-show="showList">
 
                         <Row :gutter="16">
-                            <ul class="nav navbar-top-links navbar-right" style="font-size: 1.3em;">
+                            <ul class="nav navbar-top-links navbar-right">
 
                                 <!--<li>
                                     <i-input v-model="orderSn1" @on-enter="queryInveResponse" placeholder="输入要查询回执的订单号" id="queryInveResponse" />
@@ -162,7 +198,7 @@
                                 </li>
                                 <li><span style="margin-right: 35px"><i class="fa fa-user-circle" ></i> &nbsp;收银员:<b>{{sysUserInfo.username}}</b></span></li>
                                 <li><a href="javascript:;" @click="updatePasswordOpen"><i class="fa fa-lock"></i> &nbsp;修改密码</a></li>
-                                <li><a @click="logout" style="font-size: 1em"><i class="fa fa fa-sign-out"></i> 退出</a></li>
+                                <li><a @click="logout"><i class="fa fa fa-sign-out"></i> 退出</a></li>
                             </ul>
                         </Row>
                     </div>
@@ -190,7 +226,7 @@
                         <i-input v-model="prodBarcode" @on-enter="query" placeholder="输入或扫码商品条形码" id="saomiao"  />
                     </li>-->
                     <li style="margin-top: 50px;" >
-                        <div v-show="goodsDetail" style="font-size: 1.2em">
+                        <div v-show="goodsDetail">
                             <img id="goodsImg" :src="goods.primaryPicUrl" class="img-rounded"/>
                             <h1 style="margin: 8px;font-size: 20px;"><strong>{{goods.name}}</strong></h1>
                             <p style="margin: 8px;">单价: <strong>{{goods.retailPrice}}</strong> /元</p>
@@ -210,9 +246,9 @@
             </div>
             <div class="col-md-6 col-sm-8" style="padding: 0px;background-color: #f0f0f0">
                 <ul class="list-unstyled; ">
-                    <li ref="overflowLi" style="height: 310px;overflow:auto">
+                    <li ref="overflowLi" id="tableLi" style="overflow:auto">
                         <table id="cbec" class="table .table-striped">
-                            <tr style="border: white;background-color: #F5DCB3;font-size: 1.3em" >
+                            <tr style="border: white;background-color: #F5DCB3;" >
                                 <th style="width: 26%;">跨境商品名称</th>
                                 <th style="width: 9%;">单价</th>
                                 <th style="width: 11%;">积分优惠</th>
@@ -223,7 +259,7 @@
                                 <th style="width: 13%;">参与活动</th>
                                 <th>&nbsp;</th>
                             </tr>
-                            <tr v-for="(item,i) in goodsList" v-if="item.name" style="font-size: 1em">
+                            <tr v-for="(item,i) in goodsList" v-if="item.name">
                                 <td> {{item.name}}</td>
                                 <td> {{item.retailPrice}}</td>
                                 <td> {{item.deductionPrice}}</td>
@@ -457,7 +493,7 @@
             </div>
             <div class="col-md-3 col-sm-1">
                 <h2 class="text-center" style="border: white;background-color: #F5DCB3;padding: 8px" >小票码 <span v-show="delayResponse"> 海关卡回执导致单量堆积</span></h2><br/>
-                <div class="row" style="border: white;background-color: #f0f0f0;overflow:auto;min-height: 420px;">
+                <div id="codediv" class="row" style="border: white;background-color: #f0f0f0;overflow:auto;">
                     <div class="col-xs-4 col-sm-4" v-for="(item,i) in pickUpCodeList" style="margin-bottom: 8px;">
                         <i-button data-toggle="modal" data-target="#orderDetail" style="width: 110px;font-family: 微软雅黑" @click="queryOrderDetail(item.orderSn,item.pickUpCodeSn)" v-if="item.pickUpCodeStatus == 0"  >&nbsp;{{item.pickUpCodeSn}}</i-button>
                         <i-button data-toggle="modal" data-target="#orderDetail" style="background-color:#83e7b4;width: 110px;font-family: 微软雅黑" @click="queryOrderDetail(item.orderSn,item.pickUpCodeSn)" v-if="item.pickUpCodeStatus == 1" >{{item.pickUpCodeSn}}</i-button>
@@ -562,17 +598,17 @@
 
                         </div>
                         <div class="modal-footer">
-                            <button v-if="canRefund" type="button" style="margin:0 30px 0 20px;font-size: 20px;float: left" class="btn ivu-btn-error" @click="refundOrder()" id="refundOrder" data-dismiss="modal">退款</button>
-                            <button v-else disabled type="button" style="margin:0 30px 0 25px;font-size: 20px;float: left" class="btn ivu-btn-error" @click="refundOrder()"  data-dismiss="modal">退款</button>
+                            <button v-if="canRefund" type="button" style="margin:0 30px 0 20px;float: left" class="btn ivu-btn-error" @click="refundOrder()" id="refundOrder" data-dismiss="modal">退款</button>
+                            <button v-else disabled type="button" style="margin:0 30px 0 25px;float: left" class="btn ivu-btn-error" @click="refundOrder()"  data-dismiss="modal">退款</button>
 <!--                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-warning" @click="confirmDelivery" id="confirmDelivery" data-dismiss="modal">确定提货</button>-->
 <!--                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="resendNotice" id="resendNotice" data-dismiss="modal">重发通知</button>-->
 <!--                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="resendWaybill" id="resendWaybill" data-dismiss="modal">重发运单</button>-->
-                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="resendorderinfo" id="resendorderinfo" data-dismiss="modal">重推订单信息</button>
-                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="resendorder" id="resendorder" data-dismiss="modal">重发订单</button>
-                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="resendPayment" id="resendPayment" data-dismiss="modal">重发支付单</button>
+                            <button type="button" style="margin:0 30px 0 20px;" class="btn btn-primary" @click="resendorderinfo" id="resendorderinfo" data-dismiss="modal">重推订单信息</button>
+                            <button type="button" style="margin:0 30px 0 20px;" class="btn btn-primary" @click="resendorder" id="resendorder" data-dismiss="modal">重发订单</button>
+                            <button type="button" style="margin:0 30px 0 20px;" class="btn btn-primary" @click="resendPayment" id="resendPayment" data-dismiss="modal">重发支付单</button>
 <!--                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="resendOrder" id="resendOrder" data-dismiss="modal">重发订单</button>-->
 <!--                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="forceSendToOms" id="forceSendToOms" data-dismiss="modal">强推清关</button>-->
-                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="verification" id="verification" data-dismiss="modal">核销</button>
+                            <button type="button" style="margin:0 30px 0 20px;" class="btn btn-primary" @click="verification" id="verification" data-dismiss="modal">核销</button>
 <!--                            <button type="button" style="margin:0 30px 0 20px;font-size: 25px;" class="btn btn-primary" @click="verEwbtion" id="verEwbtion" data-dismiss="modal">打印快递单</button>-->
                         </div>
                     </div>