chore: i18n资源

style: 订阅弹窗样式
2025-12-12 10:05:00 +08:00 · 2025-12-12 10:04:28 +08:00
2 changed files with 983 additions and 952 deletions
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -19,7 +19,8 @@
      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
        <!-- <i class="fi fi-rr-cross-small"></i> -->
        <svg
-			width="100%" height="100%"
+          width="100%"
+          height="100%"
          viewBox="0 0 46 46"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
@@ -49,20 +50,32 @@
    <div class="renewContent">
      <div class="left">
        <div class="video">
-			  <video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
+          <video
+            autoplay
+            loop
+            muted
+            playsinline
+            src="@/assets/images/icon/paymentVideo.mp4"
+          ></video>
          <div class="mask"></div>
        </div>
-		  <div class="title">{{ $t("Renew.Strengths") }}</div>
+        <div class="title">{{ $t('Renew.Strengths') }}</div>
        <div class="content">
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce1.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce1.png" alt="" />
              </div>
              <div class="text">
-				  <p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle1') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle1_1') }}
+                </p>
                <p class="info">
-					  {{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
+                  {{ $t('Renew.StrengthsInfo1') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo1_1') }}
                </p>
              </div>
            </div>
@@ -70,12 +83,18 @@
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce2.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce2.png" alt="" />
              </div>
              <div class="text">
-				  <p class="title">{{ $t("Renew.StrengthsTitle2") }}<br>{{ $t("Renew.StrengthsTitle2_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle2') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle2_1') }}
+                </p>
                <p class="info">
-					  {{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
+                  {{ $t('Renew.StrengthsInfo2') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo2_1') }}
                </p>
              </div>
            </div>
@@ -83,13 +102,21 @@
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce3.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce3.png" alt="" />
              </div>
              <div class="text">
                <p class="title"></p>
-				  <p class="title">{{ $t("Renew.StrengthsTitle3") }}<br>{{ $t("Renew.StrengthsTitle3_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle3') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle3_1') }}
+                </p>
                <p class="info">
-					  {{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
+                  {{ $t('Renew.StrengthsInfo3') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo3_1') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo3_2') }}
                </p>
              </div>
            </div>
@@ -97,12 +124,18 @@
          <div class="benefitsItem">
            <div class="describe">
              <div class="icon">
-				  <img src="@/assets/images/icon/paymentIntroduce4.png" alt="">
+                <img src="@/assets/images/icon/paymentIntroduce4.png" alt="" />
              </div>
              <div class="text">
-				  <p class="title">{{ $t("Renew.StrengthsTitle4") }}<br>{{ $t("Renew.StrengthsTitle4_1") }}</p>
+                <p class="title">
+                  {{ $t('Renew.StrengthsTitle4') }}
+                  <br />
+                  {{ $t('Renew.StrengthsTitle4_1') }}
+                </p>
                <p class="info">
-					  {{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
+                  {{ $t('Renew.StrengthsInfo4') }}
+                  <br />
+                  {{ $t('Renew.StrengthsInfo4_1') }}
                </p>
              </div>
            </div>
@@ -111,7 +144,7 @@
      </div>
      <div class="right">
        <div class="title">
-			{{ $t("Renew.title") }}
+          {{ $t('Renew.title') }}
        </div>
        <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
        <div class="content">
@@ -119,36 +152,31 @@
            class="productItem"
            :class="{
              active: item.price == current.price,
-				sellWell: item.sellWell,
+              sellWell: item.sellWell
            }"
            v-for="item in personage"
            :key="item.price"
            @click="setPromotionData(item)"
          >
-			  <div class="popular" v-show="item.sellWell">{{ $t("Renew.MOSTPOPULAR") }}</div>
+            <div class="popular" v-show="item.sellWell">
+              {{ $t('Renew.MOSTPOPULAR') }}
+            </div>
            <div class="priceBox">
              <div class="left">
                <p class="productType">1 {{ item.type.label }}</p>
-				  <p class="price">${{ item.price }}</p>
+                <p class="price">HK $  {{ item.price }}</p>
              </div>
              <div class="right">
                <div class="promotion">
-					<div
-					  class="succeed"
-					  v-show="item.promotionData.error == 'true'"
-					>
+                  <div class="succeed" v-show="item.promotionData.error == 'true'">
                    {{ item.promotionData.code }}
-					  <i
-						class="fi fi-sr-times-hexagon"
-						@click="clearPromotionCode"
-					  ></i>
+                    <i class="fi fi-sr-times-hexagon" @click="clearPromotionCode"></i>
                  </div>
                  <div
                    class="input"
                    @click.stop
                    v-show="
-						!item.promotionData.error ||
-						item.promotionData.error == 'false'
+                      !item.promotionData.error || item.promotionData.error == 'false'
                    "
                  >
                    <input
@@ -156,14 +184,11 @@
                      :placeholder="$t('Renew.promotionCode')"
                      v-model="item.promotionData.code"
                    />
-					  <div style="cursor: pointer; background-color: #000; font-size: 1.2rem; color: #fff; padding: 0 .5rem;" @click="examine(item)">
-						{{ $t("Renew.use") }}
+                    <div class="apply-btn" @click="examine(item)">
+                      {{ $t('Renew.use') }}
                    </div>
                  </div>
-					<div
-					  class="error"
-					  v-show="item.promotionData.error == 'false'"
-					>
+                  <div class="error" v-show="item.promotionData.error == 'false'">
                    {{ item.promotionData.str }}
                  </div>
                </div>
@@ -181,7 +206,7 @@
        <div class="payment">
          <div class="allocation">
            <div class="selectType">
-				<div class="text">{{ $t("Renew.Payment") }}:</div>
+              <div class="text">{{ $t('Renew.Payment') }}:</div>
              <label>
                <input
                  name="payment"
@@ -190,7 +215,7 @@
                  v-model="PaymentType"
                  @change="setPaymentType('CreditCard')"
                />
-				  {{ $t("Renew.CreditCard") }}
+                {{ $t('Renew.CreditCard') }}
              </label>
              <label>
                <input
@@ -200,43 +225,47 @@
                  v-model="PaymentType"
                  @change="setPaymentType('Alipay')"
                />
-				  {{ $t("Renew.Alipay") }}
+                {{ $t('Renew.Alipay') }}
              </label>
            </div>
          </div>
          <div class="gallery_btn gallery_btn_radius" @click="payment">
-				  {{ $t("upgradePlan.Continue") }}
+            {{ $t('upgradePlan.Continue') }}
          </div>
          <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
            <label>
              <!-- <input type="checkbox" v-model="clause" /> -->
-				<span class="generalModelDescription"
-				  >{{ $t("upgradePlan.policy")}}
+              <span class="generalModelDescription">
+                {{ $t('upgradePlan.policy') }}
                <a
                  href="https://code-create.com.hk/aida-terms-and-conditions/"
-					target="_blank">
-					{{ $t("upgradePlan.policy1") }}
+                  target="_blank"
+                >
+                  {{ $t('upgradePlan.policy1') }}
                </a>
                &
                <a
                  href="https://code-create.com.hk/aida-subscription-agreement/"
-					target="_blank">
-					{{ $t("upgradePlan.policy2") }}
+                  target="_blank"
+                >
+                  {{ $t('upgradePlan.policy2') }}
                </a>
                <!-- . * -->
-				  </span
-				>
+              </span>
            </label>
            <label class="secure">
-				  <span><i class="fi fi-rr-shield-check"></i>Pay safe & secure</span>
+              <span>
+                <i class="fi fi-rr-shield-check"></i>
+                Pay safe & secure
+              </span>
            </label>
            <label class="payIcon">
-				  <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="">
-				  <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="">
-				  <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="">
-				  <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="">
-				  <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="">
-				  <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="">
+              <img class="stripe" src="@/assets/images/icon/stripe.svg" alt="" />
+              <img class="alipay" src="@/assets/images/icon/alipay.svg" alt="" />
+              <img class="alipay" src="@/assets/images/icon/jcbPay.svg" alt="" />
+              <img class="alipay" src="@/assets/images/icon/mastercardPay.svg" alt="" />
+              <img class="alipay" src="@/assets/images/icon/yinlianPay.svg" alt="" />
+              <img class="alipay" src="@/assets/images/icon/visaPay.svg" alt="" />
            </label>
          </div>
          <!-- <div class="paySecure">
@@ -250,101 +279,104 @@
      <a-spin size="large" />
    </div>
    <div class="mark_loading" v-show="isShowMark" state="true">
-		<div class="mark_loading_title">{{ $t("upgradePlan.completed") }}</div>
-		<div class="mark_loading_intro">{{ $t("upgradePlan.hint") }}</div>
+      <div class="mark_loading_title">{{ $t('upgradePlan.completed') }}</div>
+      <div class="mark_loading_intro">{{ $t('upgradePlan.hint') }}</div>
      <div class="mark_loading_title_box">
        <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
-			{{ $t("upgradePlan.Back") }}
+          {{ $t('upgradePlan.Back') }}
        </div>
        <div class="mark_loading_btn" @click="completePayment">OK</div>
      </div>
    </div>
  </a-modal>
-	<payMethod
-	  ref="payMethod"
-	  @completePayment="cancelDsign"
-	  type="renew"
-	></payMethod>
-  </template>
+  <payMethod ref="payMethod" @completePayment="cancelDsign" type="renew"></payMethod>
+</template>

-  <script lang="ts">
-  import { defineComponent, computed, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
-  import { message } from "ant-design-vue";
-  import payMethod from "@/component/Pay/payMethod.vue";
-  import { useStore } from "vuex";
-  import { useI18n } from "vue-i18n";
-  import { Https } from "@/tool/https";
-  import md5 from "md5";
-  export default defineComponent({
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  reactive,
+  toRefs,
+  onMounted,
+  onBeforeUnmount
+} from 'vue'
+import { message } from 'ant-design-vue'
+import payMethod from '@/component/Pay/payMethod.vue'
+import { useStore } from 'vuex'
+import { useI18n } from 'vue-i18n'
+import { Https } from '@/tool/https'
+import md5 from 'md5'
+export default defineComponent({
  components: {
-	  payMethod,
+    payMethod
  },
  setup() {
-	  const store = useStore();
-	  const { t } = useI18n();
+    const store = useStore()
+    const { t } = useI18n()
    let renew = reactive({
      renewModel: false,
      renewModelMask: true,
-		pageWidth: "50%",
-	  });
+      pageWidth: '50%'
+    })
    let payMethodData = reactive({
      clause: false,
      labelDisclaimer: null as any,
      newWindow: null as any,
      isShowMark: false,
-		isShowMark_: false,
-	  });
+      isShowMark_: false
+    })
    let renewData = reactive({
      personage: [
        {
-			price: "100",
+          price: '100',
          sellWell: true,
          activity: false, //活动打折
          type: {
-			  value: "EcoMonth",
-			  label: computed(()=>t("Renew.Monthly")),
+            value: 'EcoMonth',
+            label: computed(() => t('Renew.Monthly'))
          },
          //   PaymentType: "CreditCard",
          promotionData: {
-			  code: "",
-			  error: "",
-			  str: "",
-			  price: "",
-			},
+            code: '',
+            error: '',
+            str: '',
+            price: ''
+          }
        },
        {
-			price: "500",
+          price: '500',
          sellWell: false,
          activity: false, //活动打折
          type: {
-			  value: "Month",
-			  label: computed(()=>t("Renew.Monthly")),
+            value: 'Month',
+            label: computed(() => t('Renew.Monthly'))
          },
          //   PaymentType: "CreditCard",
          promotionData: {
-			  code: "",
-			  error: "",
-			  str: "",
-			  price: "",
-			},
+            code: '',
+            error: '',
+            str: '',
+            price: ''
+          }
        },
        {
-			price: "5,000",
+          price: '5,000',
          sellWell: false,
          activity: false, //活动打折
-			typeValue: "year",
+          typeValue: 'year',
          type: {
-			  value: "Year",
-			  label: computed(()=>t("Renew.Yearly")),
+            value: 'Year',
+            label: computed(() => t('Renew.Yearly'))
          },
          //   PaymentType: "CreditCard",
          promotionData: {
-			  code: "",
-			  error: "",
-			  str: "",
-			  price: "",
-			},
-		  },
+            code: '',
+            error: '',
+            str: '',
+            price: ''
+          }
+        }
      ],
      // personage:computed(()=>{
      //     return {
@@ -365,55 +397,55 @@
      // }),
      firm: computed(() => {
        return {
-			title: "Education Edition",
+          title: 'Education Edition',
          price: {
-			  year: "500",
+            year: '500'
          },
          unit: {
-			  year: "HKD / Year",
+            year: 'HKD / Year'
          },
-			type: "year",
+          type: 'year',
          autoRenewal: {
-			  text: t("Renew.automatically"),
-			  value: true,
+            text: t('Renew.automatically'),
+            value: true
          },
-			typeList: ["year"],
-			info: "Customised plan",
-		  };
+          typeList: ['year'],
+          info: 'Customised plan'
+        }
      }),
      education: computed(() => {
        return {
-			title: "Enterprise Edition",
+          title: 'Enterprise Edition',
          price: {
-			  year: "500",
+            year: '500'
          },
          unit: {
-			  year: "HKD / Year",
+            year: 'HKD / Year'
          },
-			type: "year",
+          type: 'year',
          autoRenewal: {
-			  text: t("Renew.automatically"),
-			  value: true,
+            text: t('Renew.automatically'),
+            value: true
          },
-			typeList: ["year"],
-			info: "Customised plan",
-		  };
+          typeList: ['year'],
+          info: 'Customised plan'
+        }
      }),
      current: {} as any,
      payMethod: null as any,
-		PaymentType: "CreditCard",
-	  });
+      PaymentType: 'CreditCard'
+    })
    const init = () => {
-		renew.renewModel = true;
-		renewData.current = renewData.personage[1];
-	  };
+      renew.renewModel = true
+      renewData.current = renewData.personage[1]
+    }
    const cancelDsign = () => {
-		renew.renewModel = false;
+      renew.renewModel = false
      store.dispatch('getUserDetail')
-	  };
+    }
    const setPaymentType = (str: any) => {
-		renewData.PaymentType = str;
-	  };
+      renewData.PaymentType = str
+    }
    const payment = () => {
      //   if (!payMethodData.clause) {
      //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
@@ -425,104 +457,92 @@
      //     }
      //     return;
      //   }
-		if (!renewData.PaymentType)
-		  return message.info(t("Renew.PleaseSelectPayment"));
-		let url = window.location.origin + "/paySucceed";
+      if (!renewData.PaymentType) return message.info(t('Renew.PleaseSelectPayment'))
+      let url = window.location.origin + '/paySucceed'
      let data = {
-		  autoRenewal: renewData.PaymentType != "Alipay", //false为不自动续费
-		  productName: "Subscription",
+        autoRenewal: renewData.PaymentType != 'Alipay', //false为不自动续费
+        productName: 'Subscription',
        quantity: 1,
        returnUrl: url,
        subscribeType: renewData.current.type.value, //yearly为年费，monthly为月费
-		  wallet: "ALIPAYHK",
-		  promotionCode: renewData.current.promotionData.code,
-		};
-		let httpsUrl = Https.httpUrls.payStripe;
-		payMethodData.isShowMark_ = true;
+        wallet: 'ALIPAYHK',
+        promotionCode: renewData.current.promotionData.code
+      }
+      let httpsUrl = Https.httpUrls.payStripe
+      payMethodData.isShowMark_ = true
      Https.axiosPost(httpsUrl, data)
        .then((rv: any) => {
-			var width = 800;
-			var height = 600;
-			var left = (screen.width - width) / 2;
-			var top = (screen.height - height) / 2;
+          var width = 800
+          var height = 600
+          var left = (screen.width - width) / 2
+          var top = (screen.height - height) / 2
          payMethodData.newWindow = window.open(
-			  "",
-			  "_blank",
-			  "width=" +
-				width +
-				", height=" +
-				height +
-				", left=" +
-				left +
-				", top=" +
-				top
-			);
-			let herf = rv;
+            '',
+            '_blank',
+            'width=' + width + ', height=' + height + ', left=' + left + ', top=' + top
+          )
+          let herf = rv
          if (payMethodData.newWindow) {
-			  payMethodData.newWindow.location.href = herf;
+            payMethodData.newWindow.location.href = herf
          } else {
            // window.open(herf, '_blank');
-			  window.location.href = herf;
+            window.location.href = herf
          }
-			payMethodData.newWindow = null;
-			payMethodData.isShowMark = true;
-			payMethodData.isShowMark_ = false;
+          payMethodData.newWindow = null
+          payMethodData.isShowMark = true
+          payMethodData.isShowMark_ = false
+        })
+        .catch(res => {
+          payMethodData.isShowMark_ = false
        })
-		  .catch((res) => {
-			payMethodData.isShowMark_ = false;
-		  });

      // renewData.payMethod.init(data)
-	  };
+    }
    const setPaidBack = () => {
-		payMethod.payMethodModel = false;
-		payMethodData.isShowMark = false;
-		payMethodData.clause = false;
-	  };
+      payMethod.payMethodModel = false
+      payMethodData.isShowMark = false
+      payMethodData.clause = false
+    }
    const completePayment = () => {
-		renew.renewModel = false;
-		setPaidBack();
-	  };
+      renew.renewModel = false
+      setPaidBack()
+    }
    const examine = (item: any) => {
      // renewData.promotionData.error
-		let price = item?.price;
-		const normalNumber = Number(price.replace(/,/g, ""));
+      let price = item?.price
+      const normalNumber = Number(price.replace(/,/g, ''))
      if (!item.promotionData.code) {
-		  return;
+        return
      }
      let data = {
        promotionCode: item.promotionData.code,
-		  price: normalNumber,
-		};
-		Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then(
-		  (rv: any) => {
+        price: normalNumber
+      }
+      Https.axiosGet(Https.httpUrls.checkCoupon, { params: data }).then((rv: any) => {
        if (rv) {
          renewData.personage.forEach((personageItem: any) => {
            if (personageItem.price == item.price) {
-				  if (rv.status == "valid") {
-					item.promotionData.error = "true";
-					item.promotionData.price = Number(
-					  rv.discountedPrice
-					).toLocaleString();
+              if (rv.status == 'valid') {
+                item.promotionData.error = 'true'
+                item.promotionData.price = Number(rv.discountedPrice).toLocaleString()
              } else {
-					item.promotionData.error = "false";
-					item.promotionData.str = rv.message;
+                item.promotionData.error = 'false'
+                item.promotionData.str = rv.message
              }
            }
-			  });
+          })
        } else {
        }
+      })
    }
-		);
-	  };
    const clearPromotionCode = () => {
-		renewData.current.promotionData.error = "";
-		renewData.current.promotionData.code = "";
-		renewData.current.promotionData.price = "";
-	  };
+      renewData.current.promotionData.error = ''
+      renewData.current.promotionData.code = ''
+      renewData.current.promotionData.price = ''
+    }
    const setPromotionData = (item: any) => {
-		renewData.current = item;
-	  };
+      renewData.current = item
+    }
    return {
      store,
      ...toRefs(renew),
@@ -536,21 +556,21 @@
      completePayment,
      examine,
      clearPromotionCode,
-		setPromotionData,
-	  };
+      setPromotionData
+    }
  },
  data() {
-	  return {};
+    return {}
  },
  methods: {
    turnToWindow(url: any) {
-		window.open(url);
-	  },
-	},
-  });
-  </script>
-  <style lang="less" scoped>
-  .renew {
+      window.open(url)
+    }
+  }
+})
+</script>
+<style lang="less" scoped>
+.renew {
  :deep(.ant-modal-body) {
    padding: 0;
  }
@@ -560,6 +580,18 @@
    overflow: hidden;
    > .left,
    > .right {
+      .apply-btn {
+        cursor: pointer;
+        background-color: rgb(27, 34, 60);
+        font-size: 0.8rem;
+        color: #fff;
+        padding: 0 0.5rem;
+				width: 3.3rem;
+				height: 1.4rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+      }
      > .title {
        text-align: center;
        font-size: 3.2rem;
@@ -590,24 +622,24 @@
      position: relative;
      display: flex;
      flex-direction: column;
-		> .video{
+      > .video {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
-		  > video{
+        > video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
-		  > .mask{
+        > .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
-			  background: rgba(0,0,0,.5);
+          background: rgba(0, 0, 0, 0.5);
        }
      }

@@ -679,11 +711,11 @@
          margin-bottom: 1rem;
          border-radius: 1rem;
          overflow: hidden;
-			border: 1.5px solid #E7EBFF;
+          border: 1.5px solid #e7ebff;
          cursor: pointer;

          > .popular {
-			  background: #1B223C;
+            background: #1b223c;
            font-weight: 600;
            display: flex;
            justify-content: center;
@@ -745,7 +777,7 @@
                  display: flex;
                  align-items: center;
                  border-radius: 2rem;
-					border: 2px solid #000;
+                  border: 1.5px solid rgb(216, 218, 220);
                  overflow: hidden;
                  padding: 0 1rem;
                  input {
@@ -768,11 +800,11 @@
              }
            }
          }
-			&.active,&:hover {
+          &.active,
+          &:hover {
            // 40% opacity
            background: rgba(231, 235, 255, 0.4);
            // border: 2px solid #0ea982;
-			 
          }
          &.sellWell {
            // border: 2px solid #0ea982;
@@ -810,9 +842,9 @@
        > .gallery_btn {
          width: 100%;
          margin: 2rem 0;
-			margin-bottom: .5rem;
+          margin-bottom: 0.5rem;
          margin-top: 1rem;
-			background: #1B223C;
+          background: #1b223c;
          color: #fff;
        }
        > .payMethod_payAffirm_clause {
@@ -835,27 +867,27 @@
              }
            }
          }
-			> .secure{
+          > .secure {
            border: 1px solid #ededed;
            background: #f1fbf9;
            color: #1cb36c;
-			  padding: .4rem .8rem;
-			  border-radius: .5rem;
+            padding: 0.4rem 0.8rem;
+            border-radius: 0.5rem;
            margin-top: 4rem;
-			  > span{
+            > span {
              display: flex;
              align-items: center;
            }
-			  i{
+            i {
              display: flex;
-				  margin-right: .5rem;
+              margin-right: 0.5rem;
            }
          }
-			> .payIcon{
+          > .payIcon {
            height: 2rem;
            margin-top: 1rem;
-			  img{
-				  margin: 0 .3rem;
+            img {
+              margin: 0 0.3rem;
              height: 100%;
            }
          }
@@ -951,6 +983,5 @@
      background: rgba(0, 0, 0, 0);
    }
  }
-  }
-  </style>
-  
+}
+</style>
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -959,7 +959,7 @@ export default {
    MOSTPOPULAR: 'MOST POPULAR',
    Monthly: 'Monthly',
    Yearly: 'Yearly',
-    promotionCode: 'Coupon',
+    promotionCode: 'Coupon Code',
    use: 'Apply',
    PromoCodeError:
      'Please check if the promo code is correct or if the date has expired',
Author	SHA1	Message	Date
zhangyahui	9cb6be3098	chore: i18n资源	2025-12-12 10:05:00 +08:00
zhangyahui	4ab4578081	style: 订阅弹窗样式	2025-12-12 10:04:28 +08:00