H5适配

zhangmeng
Showing 5 changed files with 186 additions and 92 deletions
src/viewsPc/booking/pay.vue
src/viewsPc/booking/ticket/addInvoice.vue
src/viewsPc/booking/ticket/confirmOrder.vue
src/viewsPc/booking/ticket/index.vue
src/viewsPc/booking/ticket/peopleManage.vue
--- a/src/viewsPc/booking/pay.vue
View file @fd3f452
+++ b/src/viewsPc/booking/pay.vue
View file @fd3f452
@@ -469,11 +469,11 @@
            <div v-if="payType == '2'&&wePayCodeUrl">
              <div class="payImgbox flexCenter">
                <div>
-                  <img :src="wePayCodeUrl" class="border" width="260">
+                  <img :src="wePayCodeUrl" class="border payImg1" width="260">
-                  <img class="mt20" src="@/assets/img/sm.png">
+                  <img class="mt20 payImg2" src="@/assets/img/sm.png">
                </div>
                <div class="ml20">
-                  <img height="360" src="@/assets/img/rr.jpg">
+                  <img class="payImg3" height="360" src="@/assets/img/rr.jpg">
                </div>
              </div>
              <div v-if="language==0" class="tip text-center text-danger">
@@ -1161,4 +1161,24 @@ const showSJ = () => {
 .price {
  color: orange;
 }
+@media screen and (max-width: 768px) {
+  .payImgbox {
+    width: 100%;
+    .payImg1 {
+      width: 40vw;
+    }
+    .payImg2 {
+      width: 40vw;
+    }
+    .payImg3 {
+      width: 40vw;
+      height: auto;
+    }
+  }
+}
 </style>
--- a/src/viewsPc/booking/ticket/addInvoice.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/addInvoice.vue
View file @fd3f452
@@ -22,7 +22,7 @@
              <div>
                <p>票档：{{ ticketForm.extJson?.atName }}</p>
                <p>场馆：{{ ticketForm.extJson?.atsName }}</p>
-                <p>场次：{{ ticketForm.extJson?.sessionType =='1000'? '日间场' : '夜间场' }}</p>
+                <p>场次：{{ ticketForm.extJson?.sessionType == '1000' ? '日间场' : '夜间场' }}</p>
                <p>票型：{{ ticketForm.extJson?.atstName }}</p>
              </div>
              <div>
@@ -34,7 +34,7 @@
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">联系方式：{{ ticketForm.phone }}
                  </el-col>
                  <el-col :lg="8" :md="12" :sm="12" :xs="24">
-                    共计:{{ (totalMoney*1).toFixed(2) }}{{
+                    共计:{{ (totalMoney * 1).toFixed(2) }}{{
                      paymentType == 1 ? '￥' : '€'
                    }}
                  </el-col>
@@ -51,7 +51,9 @@
                class="mw500"
              >
                <el-form-item :label="language==0 ?'开票金额':'Amount'">
-                  <span class="bigprice">{{ paymentType != 3 ? '¥' : '€' }}{{ paymentType != 3?ticketForm.total:ticketForm.totalEn }}</span>
+                  <span class="bigprice">{{
+                    paymentType != 3 ? '¥' : '€'
+                  }}{{ paymentType != 3 ? ticketForm.total : ticketForm.totalEn }}</span>
                </el-form-item>
                <el-form-item :label="language==0 ?`发票形式`:'Invoice Form'" prop="invoiceForm" required>
@@ -475,4 +477,5 @@ function goBack() {
  line-height: 1;
  font-family: "DIN Alternate";
 }
 </style>
--- a/src/viewsPc/booking/ticket/confirmOrder.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/confirmOrder.vue
View file @fd3f452
@@ -23,7 +23,7 @@
              </div>
              <div class="form">
-                <el-form ref="formRef" :model="orderForm" :rules="rules" label-width="140px">
+                <el-form ref="formRef" :model="orderForm" :rules="rules" label-position="top" label-width="130px">
                  <div v-if="TickForm2.ticketType == '1'">
                    <el-form-item :label="language == 0 ? '桌号' : 'Table'">
@@ -725,12 +725,6 @@ div {
  cursor: pointer
 }
-@media screen and (max-width: 768px) {
-  .container {
-    width: 100%;
-  }
-}
 .rightBox {
  .info {
    background: rgba(69, 61, 234, 0.04);
@@ -741,4 +735,49 @@ div {
    margin-top: 30px;
  }
 }
+@media screen and (max-width: 768px) {
+  .container {
+    width: 100%;
+    :deep(.form) {
+      padding: 30px 0 !important;
+      form {
+        padding: 10px;
+      }
+    }
+    .footer {
+      display: block;
+      width: 100%;
+      height: auto;
+      padding: 20px;
+      div {
+        width: 100%;
+      }
+      .goBack {
+        width: 140px;
+        position: relative;
+        height: 40px;
+        top: 0;
+        left: 0%;
+        margin: 10px 0;
+      }
+      .pay {
+        width: 140px;
+        position: relative;
+        height: 40px;
+        top: -50px;
+        left: 55%;
+      }
+    }
+  }
+}
 </style>
--- a/src/viewsPc/booking/ticket/index.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/index.vue
View file @fd3f452
@@ -2,7 +2,11 @@
  <div>
    <!-- top -->
    <div class="container top ">
+      <el-row :gutter="20" style="width: 100%">
+        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <img :src="fillImgUrl(matchForm.ticketImg)" alt="" class="cover_img">
+        </el-col>
+        <el-col :lg="12" :md="12" :sm="24" :xs="24">
          <div class="info">
            <div class="title">{{ matchForm.name }}</div>
            <div class="time">
@@ -231,6 +235,10 @@
              </template>
            </div>
          </div>
+        </el-col>
+      </el-row>
    </div>
    <div class="container bottom">
@@ -430,7 +438,6 @@ function selectTick(v) {
  selectForm.value.latstId = v.id
  selectForm.value.price = v.price
  selectForm.value.priceEn = v.priceEn
  // vip票
  if (currTick.value.ticketType == '1') {
    showUrl.value = v.images
@@ -438,10 +445,12 @@ function selectTick(v) {
    leftCount.value = -999
  } else {
    checkNonPayment().then(res => {
+      // debugger
      if (res.data) {
        getListByAtstId({
          atstId: selectForm.value.latstId
        }).then(res => {
+          console.log(res.data)
          leftCount.value = res.data
          if (leftCount.value > 0) {
            showUrl.value = v.images
@@ -544,7 +553,7 @@ getmatchData()
    width: 500px;
    height: 667px;
    object-fit: fill;
-    margin-right: 36px;
+    //margin-right: 36px;
  }
  .info {
@@ -696,78 +705,6 @@ getmatchData()
  }
 }
-@media screen and (max-width: 768px) {
-  .container {
-    width: 100%;
-  }
-  .forWei {
-    display: block
-  }
-  .top {
-    //transform: scale(0.5);transform-origin: left top;
-    .cover_img {
-      width: 120px;
-      height: 160px;
-      margin-right: 15px;
-    }
-    .info {
-      padding: 0;
-      .title {
-        font-size: 14px;
-        margin: 0;
-      }
-      .time, .address, .label, .tip {
-        font-size: 12px;
-      }
-      .title, .time, .address, .tip, .select_item_box {
-        margin-bottom: 3px;
-      }
-      .select_item_box {
-        .label {
-          font-size: 12px;
-        }
-        .select_item .tag {
-          padding: 2px 10px;
-          font-size: 12px;
-        }
-        .select_item .tagActive {
-          padding: 2px 10px;
-          font-size: 12px;
-        }
-        .select_item .tagDisabled {
-          padding: 2px 10px;
-          font-size: 12px;
-        }
-      }
-      .btn {
-        display: inline-block;
-        margin: 10px 0 0;
-        background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
-        border-radius: 20px;
-        line-height: 40px;
-        text-align: center;
-        font-weight: 500;
-        font-size: 16px;
-        color: #ffffff;
-        cursor: pointer;
-      }
-    }
-  }
-  .bottom {
-    padding: 0
-  }
-}
 .countDownTitle {
  text-align: center;
@@ -850,4 +787,85 @@ getmatchData()
  color: #4a4a4a !important;
  cursor: no-drop !important;
 }
+@media screen and (max-width: 768px) {
+  .container {
+    width: 100%;
+  }
+  .forWei {
+    display: block
+  }
+  .top {
+    //transform: scale(0.5);transform-origin: left top;
+    .cover_img {
+      width: 120px;
+      height: 160px;
+      margin-right: 15px;
+    }
+    .info {
+      padding: 0;
+      .title {
+        font-size: 14px;
+        margin: 0;
+      }
+      .time, .address, .label, .tip {
+        font-size: 12px;
+      }
+      .title, .time, .address, .tip, .select_item_box {
+        margin-bottom: 3px;
+      }
+      .select_item_box {
+        .label {
+          font-size: 12px;
+        }
+        .select_item .tag {
+          padding: 2px 10px;
+          font-size: 12px;
+        }
+        .select_item .tagActive {
+          padding: 2px 10px;
+          font-size: 12px;
+        }
+        .select_item .tagDisabled {
+          padding: 2px 10px;
+          font-size: 12px;
+        }
+      }
+      .btn {
+        display: inline-block;
+        margin: 10px 0 0;
+        background: linear-gradient(270deg, #493ceb 0%, #8623fc 100%);
+        border-radius: 20px;
+        line-height: 40px;
+        text-align: center;
+        font-weight: 500;
+        font-size: 16px;
+        color: #ffffff;
+        cursor: pointer;
+      }
+    }
+  }
+  .bottom {
+    padding: 0
+  }
+  .father {
+    .son {
+      width: 85px !important;
+      height: 67.5px !important;
+      left: 50px;
+      top: 10px;
+    }
+  }
+}
 </style>
--- a/src/viewsPc/booking/ticket/peopleManage.vue
View file @fd3f452
+++ b/src/viewsPc/booking/ticket/peopleManage.vue
View file @fd3f452
@@ -30,7 +30,7 @@
      v-model="show"
      :title="language==0?'新增观影人':'New moviegoers'"
      center
-      width="700"
+      style="max-width: 700px;min-width: 350px;"
    >
      <el-form
        ref="formRef" :model="form" :rules="rules" label-width="100px" size="large"
@@ -51,12 +51,19 @@
        </el-form-item>
      </el-form>
-      <span class="dialog-footer">
+      <div class="dialog-footer">
        <div style="text-align: center">
-          <el-button class="can_pay" @click="show = false">{{ language == 0 ? '取 消' : 'cancel' }}</el-button>
+          <el-button class="can_pay marginBtn" @click="show = false">{{
-          <el-button class="pay" type="primary" @click="submit">{{ language == 0 ? '确 定' : 'confirm' }}</el-button>
+            language == 0 ? '取 消' : 'cancel'
+          }}
+          </el-button>
+          <el-button class="pay marginBtn" type="primary" @click="submit">{{
+            language == 0 ? '确 定' : 'confirm'
+          }}
+          </el-button>
        </div>
-      </span>
+      </div>
+      <br>
    </el-dialog>
  </el-card>
@@ -302,5 +309,12 @@ div {
  .container {
    width: 100%;
  }
+  form {
+    margin: 20px 20px 0 0 !important;
+  }
+}
+.marginBtn {
+  margin: 5px
 }
 </style>