feat: 样式优化

fc71ae59 · 陆志强 · 7ed5f64a · fc71ae59 · fc71ae59 · fc71ae59
Commit fc71ae59 authored Sep 29, 2024 by 陆志强
7 changed files
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,7 @@
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta http-equiv="Cache-Control" content="no-store no-cache" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> -->
    <link href="<%= BASE_URL %><%= process.env.VUE_APP_ASSETS_DIR %>/config.js" rel="preload" as="script" />
    <!-- <link href="<%= BASE_URL %><%= process.env.VUE_APP_ASSETS_DIR %>/moduleLoader.js" rel="preload" as="script" /> -->

--- a/src/assets/styles/reset.less
+++ b/src/assets/styles/reset.less
@@ -166,3 +166,7 @@ body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
+.van-dialog__message {
+  font-size: 16px !important;
+}
--- a/src/components/Common/AddressPopup/AddAddressPopup.vue
+++ b/src/components/Common/AddressPopup/AddAddressPopup.vue
@@ -159,7 +159,7 @@ export default {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px;
+  padding: 16px 12px 12px;
  font-size: 14px;
  &-title {
    font-size: 16px;

--- a/src/components/Common/AddressPopup/AddressPopup.vue
+++ b/src/components/Common/AddressPopup/AddressPopup.vue
@@ -196,7 +196,7 @@ export default {
  display: flex;
  align-items: center;
  justify-content: center;
-  padding: 12px;
+  padding: 16px 12px 12px;
  font-size: 14px;
  &-title {
    font-size: 16px;
@@ -232,8 +232,8 @@ export default {
      align-items: center;
      margin-left: 15px;
      img {
-        width: 16px;
+        width: 20px;
-        height: 16px;
+        height: 20px;
        margin-right: 4px;
      }
      .name {
@@ -306,8 +306,8 @@ export default {
        display: flex;
        align-items: center;
        img {
-          width: 16px;
+          width: 20px;
-          height: 16px;
+          height: 20px;
          margin-left: 10px;
        }
      }
@@ -326,7 +326,7 @@ export default {
  line-height: 36px;
  cursor: pointer;
  text-align: center;
-  margin: 15px auto 25px;
+  margin: 15px auto 28px;
  padding-right: 12px;
 }
 </style>
--- a/src/components/Common/ConfigPopup.vue
+++ b/src/components/Common/ConfigPopup.vue
@@ -29,7 +29,7 @@
        </template>
        <template v-if="item.type === 'address' && item.isChecked">
          <template v-if="!addressList.length">
-            <van-field v-model="form.address" label-width="60" label="收货地址" readonly placeholder="请选择省市区" @focus="isError = false" @click="select" >
+            <van-field v-model="form.address" label-width="60" label="收件地址" readonly placeholder="请选择省市区" @focus="isError = false" @click="select" >
              <template #button>
                <van-icon name="location" />
              </template>
@@ -45,11 +45,17 @@
            />
          </template>
          <template v-else>
-            <div class="address" @click="isShowAddressPopup = true">
+            <div v-if="lotteryInfo.newPremise[0].isChecked + lotteryInfo.newPremise[1].isChecked === 0" class="address" @click="isShowAddressPopup = true">
              <img class="address-icon" src="@/assets/images/lottery/address.png" alt="">
              <div class="address-text">{{ form.address + form.detail }}</div>
              <img class="address-right" src="@/assets/images/lottery/address-right.png" alt="">
            </div>
+            <div v-else class="address" @click="isShowAddressPopup = true">
+              <div class="address-title">收件地址</div>
+              <img class="address-icon__alter" src="@/assets/images/lottery/address.png" alt="">
+              <div class="address-text">{{ form.address + form.detail }}</div>
+              <img class="address-right" src="@/assets/images/lottery/address-right.png" alt="">
+            </div>
          </template>
        </template>
        <template v-if="item.type.includes('custom') && item.isChecked">
@@ -400,12 +406,13 @@ export default {
 <style lang="less" scoped>
 .main {
  min-height: 42vh;
+  padding-bottom: 30px;
 }
 .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 12px;
+  padding: 16px 12px 12px;
  font-size: 14px;
  &-title {
    font-size: 16px;
@@ -441,25 +448,39 @@ export default {
      width: 24px;
      height: 24px;
      margin-right: 12px;
+      &__alter {
+        width: 20px;
+        height: 20px;
+        margin-right: 5px;
+      }
    }
    &-text {
      flex: 1;
      // width: 225px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
-      font-size: 14px;
+      font-size: 15px;
      color: #333333;
      line-height: 24px;
-      text-align: left;
+      text-align: justify;
-      padding-right: 35px;
+      padding-right: 20px;
    }
    &-right {
      width: 5px;
      height: 9px;
    }
+    &-title {
+      height: 24px;
+      line-height: 24px;
+      font-size: 15px;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      margin-right: 8px;
+    }
  }
  .code {
-    font-size: 13px;
+    font-size: 15px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #357BF0;
@@ -482,7 +503,7 @@ export default {
    font-size: 15px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
-    color: #333333;
+    color: #666666;
    margin-right: 8px;
    span {
      white-space: nowrap;

--- a/src/components/Common/ForcePopup.vue
+++ b/src/components/Common/ForcePopup.vue
@@ -76,6 +76,7 @@ export default {
    .box {
      width: 70%;
      position: relative;
+      margin-bottom: 10%;
      &-img {
        width: 100%;
        position: relative;
@@ -117,14 +118,14 @@ export default {
        }
        &__btn {
          width: 120px;
-          height: 33px;
+          height: 36px;
          background: linear-gradient( 201deg, #FD8192 0%, #FF4F31 100%);
          border-radius: 37px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
-          font-size: 13px;
+          font-size: 14px;
          color: #FFFFFF;
-          line-height: 33px;
+          line-height: 36px;
          text-align: center;
        }
      }

--- a/src/components/Lottery/Timing/Banner.vue
+++ b/src/components/Lottery/Timing/Banner.vue
@@ -54,6 +54,7 @@ export default {
    background-size: cover;
    background-position: center;
    font-size: 0;
+    z-index: 3;
  }
 }
 </style>