From aeefc0c80f9b6594a525bc12584d8d837218c78e Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Tue, 11 Nov 2025 16:21:40 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E9=98=85=E9=A1=B5=E9=9D=A2=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/HomePage/renew.vue | 1900 +++++++++++++++---------------
 1 file changed, 951 insertions(+), 949 deletions(-)

diff --git a/src/component/HomePage/renew.vue b/src/component/HomePage/renew.vue
index de626e08..f725ca03 100644
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -1,961 +1,963 @@
 <template>
-  <div class="renew" ref="renew"></div>
-  <a-modal
-    class="generalModel"
-    :get-container="() => $refs.renew"
-    v-model:visible="renewModel"
-    :footer="null"
-    width="110rem"
-    height="auto"
-    :maskClosable="false"
-    :centered="true"
-    :closable="false"
-    :mask="renewModelMask"
-    :keyboard="false"
-    :destroyOnClose="true"
-    :zIndex="1000"
-  >
-    <div class="generalModel_btn">
-      <div class="generalModel_closeIcon" @click.stop="cancelDsign()">
-        <!-- <i class="fi fi-rr-cross-small"></i> -->
-        <svg
-          width="100%" height="100%"
-          viewBox="0 0 46 46"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
-          <rect
-            x="32.5063"
-            y="12"
-            width="3"
-            height="29"
-            rx="1.5"
-            transform="rotate(45 32.5063 12)"
-            fill="white"
-          />
-          <rect
-            x="34.6274"
-            y="32.5059"
-            width="3"
-            height="29"
-            rx="1.5"
-            transform="rotate(135 34.6274 32.5059)"
-            fill="white"
-          />
-        </svg>
-      </div>
-    </div>
-    <div class="renewContent">
-      <div class="left">
-		<div class="video">
-			<video autoplay loop muted playsinline src="@/assets/images/icon/paymentVideo.mp4"></video>
-			<div class="mask"></div>
+	<div class="renew" ref="renew"></div>
+	<a-modal
+	  class="generalModel"
+	  :get-container="() => $refs.renew"
+	  v-model:visible="renewModel"
+	  :footer="null"
+	  width="110rem"
+	  height="auto"
+	  :maskClosable="false"
+	  :centered="true"
+	  :closable="false"
+	  :mask="renewModelMask"
+	  :keyboard="false"
+	  :destroyOnClose="true"
+	  :zIndex="1000"
+	>
+	  <div class="generalModel_btn">
+		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+		  <!-- <i class="fi fi-rr-cross-small"></i> -->
+		  <svg
+			width="100%" height="100%"
+			viewBox="0 0 46 46"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		  >
+			<circle cx="23" cy="23" r="23" fill="black" fill-opacity="0.3" />
+			<rect
+			  x="32.5063"
+			  y="12"
+			  width="3"
+			  height="29"
+			  rx="1.5"
+			  transform="rotate(45 32.5063 12)"
+			  fill="white"
+			/>
+			<rect
+			  x="34.6274"
+			  y="32.5059"
+			  width="3"
+			  height="29"
+			  rx="1.5"
+			  transform="rotate(135 34.6274 32.5059)"
+			  fill="white"
+			/>
+		  </svg>
 		</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="">
-              </div>
-              <div class="text">
-                <p class="title">{{ $t("Renew.StrengthsTitle1") }}<br>{{ $t("Renew.StrengthsTitle1_1") }}</p>
-                <p class="info">
-					{{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="benefitsItem">
-            <div class="describe">
-              <div class="icon">
-				<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="info">
-					{{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="benefitsItem">
-            <div class="describe">
-              <div class="icon">
-				<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="info">
-					{{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
-                </p>
-              </div>
-            </div>
-          </div>
-          <div class="benefitsItem">
-            <div class="describe">
-              <div class="icon">
-				<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="info">
-					{{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="right">
-        <div class="title">
-          {{ $t("Renew.title") }}
-        </div>
-        <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
-        <div class="content">
-          <div
-            class="productItem"
-            :class="{
-              active: item.price == current.price,
-              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="priceBox">
-              <div class="left">
-                <p class="productType">1 {{ item.type.label }}</p>
-                <p class="price">${{ item.price }}</p>
-              </div>
-              <div class="right">
-                <div class="promotion">
-                  <div
-                    class="succeed"
-                    v-show="item.promotionData.error == 'true'"
-                  >
-                    {{ item.promotionData.code }}
-                    <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'
-                    "
-                  >
-                    <input
-                      type="text"
-                      :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>
-                  </div>
-                  <div
-                    class="error"
-                    v-show="item.promotionData.error == 'false'"
-                  >
-                    {{ item.promotionData.str }}
-                  </div>
-                </div>
-                <p
-                  class="discountsPrice"
-                  v-show="item.promotionData.price"
-                  style="text-align: center"
-                >
-                  ${{ item.promotionData.price }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="payment">
-          <div class="allocation">
-            <div class="selectType">
-              <div class="text">{{ $t("Renew.Payment") }}:</div>
-              <label>
-                <input
-                  name="payment"
-                  type="radio"
-                  value="CreditCard"
-                  v-model="current.PaymentType"
-                  @change="setPaymentType('CreditCard')"
-                />
-                {{ $t("Renew.CreditCard") }}
-              </label>
-              <label>
-                <input
-                  name="payment"
-                  type="radio"
-                  value="Alipay"
-                  v-model="current.PaymentType"
-                  @change="setPaymentType('Alipay')"
-                />
-                {{ $t("Renew.Alipay") }}
-              </label>
-            </div>
-          </div>
-          <div class="gallery_btn gallery_btn_radius" @click="payment">
-                {{ $t("upgradePlan.Continue") }}
-          </div>
-          <div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
-            <label>
-              <!-- <input type="checkbox" v-model="clause" /> -->
-              <span class="generalModelDescription"
-                >{{ $t("upgradePlan.policy")}}
-				<a
-                  href="https://code-create.com.hk/aida-terms-and-conditions/"
-                  target="_blank">
-				  {{ $t("upgradePlan.policy1") }}
-				</a>
-				&
-				<a
-                  href="https://code-create.com.hk/aida-subscription-agreement/"
-                  target="_blank">
-				  {{ $t("upgradePlan.policy2") }}
-				</a>
-				<!-- . * -->
-				</span
-              >
-            </label>
-			<label class="secure">
-				<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="">
-			</label>
-          </div>
-          <!-- <div class="paySecure">
-						<svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
-						<span>Pay safe & secure </span>
-					</div> -->
-        </div>
-      </div>
-    </div>
-    <div class="mark_loading" v-show="isShowMark_">
-      <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_box">
-        <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
-          {{ $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>
-
-<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,
-  },
-  setup() {
-    const store = useStore();
-    const { t } = useI18n();
-    let renew = reactive({
-      renewModel: false,
-      renewModelMask: true,
-      pageWidth: "50%",
-    });
-    let payMethodData = reactive({
-      clause: false,
-      labelDisclaimer: null as any,
-      newWindow: null as any,
-      isShowMark: false,
-      isShowMark_: false,
-    });
-    let renewData = reactive({
-      personage: [
-        {
-          price: "100",
-          sellWell: true,
-          activity: false, //活动打折
-          type: {
-            value: "EcoMonth",
-            label: computed(()=>t("Renew.Monthly")),
-          },
-          PaymentType: "CreditCard",
-          promotionData: {
-            code: "",
-            error: "",
-            str: "",
-            price: "",
-          },
-        },
-		{
-          price: "500",
-          sellWell: false,
-          activity: false, //活动打折
-          type: {
-            value: "Month",
-            label: computed(()=>t("Renew.Monthly")),
-          },
-          PaymentType: "CreditCard",
-          promotionData: {
-            code: "",
-            error: "",
-            str: "",
-            price: "",
-          },
-        },
-        {
-          price: "5,000",
-          sellWell: false,
-          activity: false, //活动打折
-          typeValue: "year",
-          type: {
-            value: "Year",
-            label: computed(()=>t("Renew.Yearly")),
-          },
-          PaymentType: "CreditCard",
-          promotionData: {
-            code: "",
-            error: "",
-            str: "",
-            price: "",
-          },
-        },
-      ],
-      // personage:computed(()=>{
-      //     return {
-      // 		title:t('Renew.PersonalVersion'),
-      // 		price:{
-      // 			monthly:'500',
-      // 			year:'5,000',
-      // 		},
-      // 		unit:{
-      // 			monthly:t('Renew.HKDMonth'),
-      // 			year:t('Renew.HKDYear'),
-      // 		},
-      // 		type:'monthly',
-      // 		PaymentType:'',
-      // 		typeList:['monthly','year'],
-      // 		info:'Tax, VAT not included.',
-      // 	}
-      // }),
-      firm: computed(() => {
-        return {
-          title: "Education Edition",
-          price: {
-            year: "500",
-          },
-          unit: {
-            year: "HKD / Year",
-          },
-          type: "year",
-          autoRenewal: {
-            text: t("Renew.automatically"),
-            value: true,
-          },
-          typeList: ["year"],
-          info: "Customised plan",
-        };
-      }),
-      education: computed(() => {
-        return {
-          title: "Enterprise Edition",
-          price: {
-            year: "500",
-          },
-          unit: {
-            year: "HKD / Year",
-          },
-          type: "year",
-          autoRenewal: {
-            text: t("Renew.automatically"),
-            value: true,
-          },
-          typeList: ["year"],
-          info: "Customised plan",
-        };
-      }),
-      current: {} as any,
-      payMethod: null as any,
-    });
-    const init = () => {
-      renew.renewModel = true;
-      renewData.current = renewData.personage[1];
-    };
-    const cancelDsign = () => {
-      renew.renewModel = false;
-	  store.dispatch('getUserDetail')
-    };
-    const setPaymentType = (str: any) => {
-      renewData.current.PaymentType = str;
-    };
-    const payment = () => {
-    //   if (!payMethodData.clause) {
-    //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
-    //     if (!labelDisclaimer.classList.contains("animation")) {
-    //       labelDisclaimer.classList.add("animation");
-    //       setTimeout(() => {
-    //         labelDisclaimer.classList.remove("animation");
-    //       }, 1000);
-    //     }
-    //     return;
-    //   }
-      if (!renewData.current.PaymentType)
-        return message.info(t("Renew.PleaseSelectPayment"));
-      let url = window.location.origin + "/paySucceed";
-      let data = {
-        autoRenewal: renewData.current.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;
-      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;
-          payMethodData.newWindow = window.open(
-            "",
-            "_blank",
-            "width=" +
-              width +
-              ", height=" +
-              height +
-              ", left=" +
-              left +
-              ", top=" +
-              top
-          );
-          let herf = rv;
-          if (payMethodData.newWindow) {
-            payMethodData.newWindow.location.href = herf;
-          } else {
-            // window.open(herf, '_blank');
-            window.location.href = herf;
-          }
-          payMethodData.newWindow = null;
-          payMethodData.isShowMark = true;
-          payMethodData.isShowMark_ = false;
-        })
-        .catch((res) => {
-          payMethodData.isShowMark_ = false;
-        });
-
-      // renewData.payMethod.init(data)
-    };
-    const setPaidBack = () => {
-      payMethod.payMethodModel = false;
-      payMethodData.isShowMark = false;
-      payMethodData.clause = false;
-    };
-    const completePayment = () => {
-      renew.renewModel = false;
-      setPaidBack();
-    };
-    const examine = (item: any) => {
-      // renewData.promotionData.error
-      let price = item?.price;
-      const normalNumber = Number(price.replace(/,/g, ""));
-      if (!item.promotionData.code) {
-        return;
-      }
-      let data = {
-        promotionCode: item.promotionData.code,
-        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();
-                } else {
-                  item.promotionData.error = "false";
-                  item.promotionData.str = rv.message;
-                }
-              }
-            });
-          } else {
-          }
-        }
-      );
-    };
-    const clearPromotionCode = () => {
-      renewData.current.promotionData.error = "";
-      renewData.current.promotionData.code = "";
-      renewData.current.promotionData.price = "";
-    };
-    const setPromotionData = (item: any) => {
-      renewData.current = item;
-    };
-    return {
-      store,
-      ...toRefs(renew),
-      ...toRefs(renewData),
-      ...toRefs(payMethodData),
-      init,
-      cancelDsign,
-      setPaymentType,
-      payment,
-      setPaidBack,
-      completePayment,
-      examine,
-      clearPromotionCode,
-      setPromotionData,
-    };
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    turnToWindow(url: any) {
-      window.open(url);
-    },
-  },
-});
-</script>
-<style lang="less" scoped>
-.renew {
-  :deep(.ant-modal-body) {
-    padding: 0;
-  }
-  .renewContent {
-    display: flex;
-    border-radius: 3rem;
-    overflow: hidden;
-    > .left,
-    > .right {
-      > .title {
-        text-align: center;
-        font-size: 3.2rem;
-        font-weight: 600;
-        line-height: 4rem;
-		position: relative;
-      }
-      > .info {
-        text-align: center;
-        opacity: 0.6;
-        font-weight: 400;
-        margin-top: 0.8rem;
-        font-size: 1.6rem;
-		position: relative;
-      }
-      > .content {
-        margin-top: 2rem;
-        display: flex;
-        flex-direction: column;
-		position: relative;
-      }
-    }
-    > .left {
-      width: 50%;
-      background: #0f0f0f;
-      color: #fff;
-      padding: 4rem 3.2rem;
-	  position: relative;
-	  display: flex;
-		flex-direction: column;
-	  > .video{
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		left: 0;
-		top: 0;
-		> video{
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
+	  </div>
+	  <div class="renewContent">
+		<div class="left">
+		  <div class="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="content">
+			<div class="benefitsItem">
+			  <div class="describe">
+				<div class="icon">
+				  <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="info">
+					  {{ $t("Renew.StrengthsInfo1") }}<br>{{ $t("Renew.StrengthsInfo1_1") }}
+				  </p>
+				</div>
+			  </div>
+			</div>
+			<div class="benefitsItem">
+			  <div class="describe">
+				<div class="icon">
+				  <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="info">
+					  {{ $t("Renew.StrengthsInfo2") }}<br>{{ $t("Renew.StrengthsInfo2_1") }}
+				  </p>
+				</div>
+			  </div>
+			</div>
+			<div class="benefitsItem">
+			  <div class="describe">
+				<div class="icon">
+				  <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="info">
+					  {{ $t("Renew.StrengthsInfo3") }}<br>{{ $t("Renew.StrengthsInfo3_1") }}<br>{{ $t("Renew.StrengthsInfo3_2") }}
+				  </p>
+				</div>
+			  </div>
+			</div>
+			<div class="benefitsItem">
+			  <div class="describe">
+				<div class="icon">
+				  <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="info">
+					  {{ $t("Renew.StrengthsInfo4") }}<br>{{ $t("Renew.StrengthsInfo4_1") }}
+				  </p>
+				</div>
+			  </div>
+			</div>
+		  </div>
+		</div>
+		<div class="right">
+		  <div class="title">
+			{{ $t("Renew.title") }}
+		  </div>
+		  <!-- <div class="info">{{ $t("Renew.unlimited") }}</div> -->
+		  <div class="content">
+			<div
+			  class="productItem"
+			  :class="{
+				active: item.price == current.price,
+				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="priceBox">
+				<div class="left">
+				  <p class="productType">1 {{ item.type.label }}</p>
+				  <p class="price">${{ item.price }}</p>
+				</div>
+				<div class="right">
+				  <div class="promotion">
+					<div
+					  class="succeed"
+					  v-show="item.promotionData.error == 'true'"
+					>
+					  {{ item.promotionData.code }}
+					  <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'
+					  "
+					>
+					  <input
+						type="text"
+						: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>
+					</div>
+					<div
+					  class="error"
+					  v-show="item.promotionData.error == 'false'"
+					>
+					  {{ item.promotionData.str }}
+					</div>
+				  </div>
+				  <p
+					class="discountsPrice"
+					v-show="item.promotionData.price"
+					style="text-align: center"
+				  >
+					${{ item.promotionData.price }}
+				  </p>
+				</div>
+			  </div>
+			</div>
+		  </div>
+		  <div class="payment">
+			<div class="allocation">
+			  <div class="selectType">
+				<div class="text">{{ $t("Renew.Payment") }}:</div>
+				<label>
+				  <input
+					name="payment"
+					type="radio"
+					value="CreditCard"
+					v-model="PaymentType"
+					@change="setPaymentType('CreditCard')"
+				  />
+				  {{ $t("Renew.CreditCard") }}
+				</label>
+				<label>
+				  <input
+					name="payment"
+					type="radio"
+					value="Alipay"
+					v-model="PaymentType"
+					@change="setPaymentType('Alipay')"
+				  />
+				  {{ $t("Renew.Alipay") }}
+				</label>
+			  </div>
+			</div>
+			<div class="gallery_btn gallery_btn_radius" @click="payment">
+				  {{ $t("upgradePlan.Continue") }}
+			</div>
+			<div class="payMethod_payAffirm_clause" ref="labelDisclaimer">
+			  <label>
+				<!-- <input type="checkbox" v-model="clause" /> -->
+				<span class="generalModelDescription"
+				  >{{ $t("upgradePlan.policy")}}
+				  <a
+					href="https://code-create.com.hk/aida-terms-and-conditions/"
+					target="_blank">
+					{{ $t("upgradePlan.policy1") }}
+				  </a>
+				  &
+				  <a
+					href="https://code-create.com.hk/aida-subscription-agreement/"
+					target="_blank">
+					{{ $t("upgradePlan.policy2") }}
+				  </a>
+				  <!-- . * -->
+				  </span
+				>
+			  </label>
+			  <label class="secure">
+				  <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="">
+			  </label>
+			</div>
+			<!-- <div class="paySecure">
+						  <svg data-v-4715f595="" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 17" class="shield-icon"><path fill="#4AA181" stroke="#4AA181" stroke-width=".395" d="M7.44.957 1.914 3.398a1.38 1.38 0 0 0-.822 1.256v3.69c0 1.648.443 3.257 1.218 4.667 1.577 2.154 3.835 3.222 5.986 3.222 2.152 0 4.206-1.069 5.387-3.21a9.7 9.7 0 0 0 1.225-4.679v-3.69a1.38 1.38 0 0 0-.822-1.256L8.56.957zm0 0h.001m-.001 0h.001m0 0c.351-.158.758-.159 1.119 0z"></path><g clip-path="url(#a)"><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.184" d="M10.634 6.563 7.016 10.18 5.37 8.536"></path></g><defs><clipPath id="a"><path fill="#fff" d="M4.055 4.586h7.895v7.895H4.055z"></path></clipPath></defs></svg>
+						  <span>Pay safe & secure </span>
+					  </div> -->
+		  </div>
+		</div>
+	  </div>
+	  <div class="mark_loading" v-show="isShowMark_">
+		<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_box">
+		  <div class="mark_loading_btn mark_loading_btn2" @click="setPaidBack">
+			{{ $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>
+  
+  <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,
+	},
+	setup() {
+	  const store = useStore();
+	  const { t } = useI18n();
+	  let renew = reactive({
+		renewModel: false,
+		renewModelMask: true,
+		pageWidth: "50%",
+	  });
+	  let payMethodData = reactive({
+		clause: false,
+		labelDisclaimer: null as any,
+		newWindow: null as any,
+		isShowMark: false,
+		isShowMark_: false,
+	  });
+	  let renewData = reactive({
+		personage: [
+		  {
+			price: "100",
+			sellWell: true,
+			activity: false, //活动打折
+			type: {
+			  value: "EcoMonth",
+			  label: computed(()=>t("Renew.Monthly")),
+			},
+		  //   PaymentType: "CreditCard",
+			promotionData: {
+			  code: "",
+			  error: "",
+			  str: "",
+			  price: "",
+			},
+		  },
+		  {
+			price: "500",
+			sellWell: false,
+			activity: false, //活动打折
+			type: {
+			  value: "Month",
+			  label: computed(()=>t("Renew.Monthly")),
+			},
+		  //   PaymentType: "CreditCard",
+			promotionData: {
+			  code: "",
+			  error: "",
+			  str: "",
+			  price: "",
+			},
+		  },
+		  {
+			price: "5,000",
+			sellWell: false,
+			activity: false, //活动打折
+			typeValue: "year",
+			type: {
+			  value: "Year",
+			  label: computed(()=>t("Renew.Yearly")),
+			},
+		  //   PaymentType: "CreditCard",
+			promotionData: {
+			  code: "",
+			  error: "",
+			  str: "",
+			  price: "",
+			},
+		  },
+		],
+		// personage:computed(()=>{
+		//     return {
+		// 		title:t('Renew.PersonalVersion'),
+		// 		price:{
+		// 			monthly:'500',
+		// 			year:'5,000',
+		// 		},
+		// 		unit:{
+		// 			monthly:t('Renew.HKDMonth'),
+		// 			year:t('Renew.HKDYear'),
+		// 		},
+		// 		type:'monthly',
+		// 		PaymentType:'',
+		// 		typeList:['monthly','year'],
+		// 		info:'Tax, VAT not included.',
+		// 	}
+		// }),
+		firm: computed(() => {
+		  return {
+			title: "Education Edition",
+			price: {
+			  year: "500",
+			},
+			unit: {
+			  year: "HKD / Year",
+			},
+			type: "year",
+			autoRenewal: {
+			  text: t("Renew.automatically"),
+			  value: true,
+			},
+			typeList: ["year"],
+			info: "Customised plan",
+		  };
+		}),
+		education: computed(() => {
+		  return {
+			title: "Enterprise Edition",
+			price: {
+			  year: "500",
+			},
+			unit: {
+			  year: "HKD / Year",
+			},
+			type: "year",
+			autoRenewal: {
+			  text: t("Renew.automatically"),
+			  value: true,
+			},
+			typeList: ["year"],
+			info: "Customised plan",
+		  };
+		}),
+		current: {} as any,
+		payMethod: null as any,
+		PaymentType: "CreditCard",
+	  });
+	  const init = () => {
+		renew.renewModel = true;
+		renewData.current = renewData.personage[1];
+	  };
+	  const cancelDsign = () => {
+		renew.renewModel = false;
+		store.dispatch('getUserDetail')
+	  };
+	  const setPaymentType = (str: any) => {
+		renewData.PaymentType = str;
+	  };
+	  const payment = () => {
+	  //   if (!payMethodData.clause) {
+	  //     let labelDisclaimer: any = payMethodData.labelDisclaimer;
+	  //     if (!labelDisclaimer.classList.contains("animation")) {
+	  //       labelDisclaimer.classList.add("animation");
+	  //       setTimeout(() => {
+	  //         labelDisclaimer.classList.remove("animation");
+	  //       }, 1000);
+	  //     }
+	  //     return;
+	  //   }
+		if (!renewData.PaymentType)
+		  return message.info(t("Renew.PleaseSelectPayment"));
+		let url = window.location.origin + "/paySucceed";
+		let data = {
+		  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;
+		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;
+			payMethodData.newWindow = window.open(
+			  "",
+			  "_blank",
+			  "width=" +
+				width +
+				", height=" +
+				height +
+				", left=" +
+				left +
+				", top=" +
+				top
+			);
+			let herf = rv;
+			if (payMethodData.newWindow) {
+			  payMethodData.newWindow.location.href = herf;
+			} else {
+			  // window.open(herf, '_blank');
+			  window.location.href = herf;
+			}
+			payMethodData.newWindow = null;
+			payMethodData.isShowMark = true;
+			payMethodData.isShowMark_ = false;
+		  })
+		  .catch((res) => {
+			payMethodData.isShowMark_ = false;
+		  });
+  
+		// renewData.payMethod.init(data)
+	  };
+	  const setPaidBack = () => {
+		payMethod.payMethodModel = false;
+		payMethodData.isShowMark = false;
+		payMethodData.clause = false;
+	  };
+	  const completePayment = () => {
+		renew.renewModel = false;
+		setPaidBack();
+	  };
+	  const examine = (item: any) => {
+		// renewData.promotionData.error
+		let price = item?.price;
+		const normalNumber = Number(price.replace(/,/g, ""));
+		if (!item.promotionData.code) {
+		  return;
 		}
-		> .mask{
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			background: rgba(0,0,0,.5);
+		let data = {
+		  promotionCode: item.promotionData.code,
+		  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();
+				  } else {
+					item.promotionData.error = "false";
+					item.promotionData.str = rv.message;
+				  }
+				}
+			  });
+			} else {
+			}
+		  }
+		);
+	  };
+	  const clearPromotionCode = () => {
+		renewData.current.promotionData.error = "";
+		renewData.current.promotionData.code = "";
+		renewData.current.promotionData.price = "";
+	  };
+	  const setPromotionData = (item: any) => {
+		renewData.current = item;
+	  };
+	  return {
+		store,
+		...toRefs(renew),
+		...toRefs(renewData),
+		...toRefs(payMethodData),
+		init,
+		cancelDsign,
+		setPaymentType,
+		payment,
+		setPaidBack,
+		completePayment,
+		examine,
+		clearPromotionCode,
+		setPromotionData,
+	  };
+	},
+	data() {
+	  return {};
+	},
+	methods: {
+	  turnToWindow(url: any) {
+		window.open(url);
+	  },
+	},
+  });
+  </script>
+  <style lang="less" scoped>
+  .renew {
+	:deep(.ant-modal-body) {
+	  padding: 0;
+	}
+	.renewContent {
+	  display: flex;
+	  border-radius: 3rem;
+	  overflow: hidden;
+	  > .left,
+	  > .right {
+		> .title {
+		  text-align: center;
+		  font-size: 3.2rem;
+		  font-weight: 600;
+		  line-height: 4rem;
+		  position: relative;
+		}
+		> .info {
+		  text-align: center;
+		  opacity: 0.6;
+		  font-weight: 400;
+		  margin-top: 0.8rem;
+		  font-size: 1.6rem;
+		  position: relative;
+		}
+		> .content {
+		  margin-top: 2rem;
+		  display: flex;
+		  flex-direction: column;
+		  position: relative;
 		}
 	  }
-	 
-      > .title {
-        opacity: 1;
-		// color: #fff;	
-      }
-      > .content {
-		flex-wrap: wrap;
-		flex-direction: row;
-		flex: 1;
-		align-content: center;
-		align-items: center;
-		justify-content: center;
-        > .benefitsItem {
-          display: flex;
-		  width: 50%;
-        }
-      
-        > .benefitsItem {
-          border-radius: 2.4rem;
-          margin-bottom: 1.6rem;
-          padding: 1.6rem;
-		justify-content: center;
-          > .describe {
-            display: flex;
-            align-items: center;
-			flex-direction: column;
-            > .icon {
-            //   border: 1px solid #27272a;
-            //   background: linear-gradient(#1d1d1d, #000);
-            //   border-radius: 1.4rem;
-            //   margin-right: 1.6rem;
-            //   padding: 1.4rem;
-              > img {
-                width: 12rem;
-                height: 12rem;
-              }
-            }
-            > .text {
-				text-align: center;
-              > p {
-                margin: 0;
-              }
-              > .title {
-                font-size: 2.1rem;
-                font-weight: 600;
-				line-height: 1;
-              }
-              > .info {
-                font-weight: 600;
-                margin-top: 0.4rem;
-                font-size: 1.2rem;
-                // opacity: 0.5;
-              }
-            }
-          }
-        }
-      }
-    }
-    > .right {
-      width: 50%;
-      flex-direction: column;
-      align-items: center;
-      padding: 4rem 3.2rem;
-      > .content {
-        margin-top: 2rem;
-        > .productItem {
-          margin-bottom: 1rem;
-          border-radius: 1rem;
-          overflow: hidden;
-          border: 1.5px solid #eaecf0;
-
-          > .popular {
-            background: #2d9f75;
-            font-weight: 600;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #fff;
-            padding: 0.8rem 1.2rem;
-          }
-          > .priceBox {
-            height: 11rem;
-            padding: 1rem 1.2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            > .left,
-            > .right {
-              p {
-                margin: 0;
-              }
-              > .discountsPrice,
-              > .price {
-                font-size: 1.8rem;
-                margin-top: 0.4rem;
-                opacity: 0.4;
-                font-weight: 500;
-              }
-            }
-            > .left {
-              > p:nth-child(1) {
-                font-size: 2rem;
-                opacity: 0.7;
-                font-weight: 700;
-              }
-            }
-            > .right {
-              > .promotion {
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-                > .text {
-                  font-size: 1.4rem;
-                  font-weight: 600;
-                  margin-right: 2rem;
-                }
-                > .succeed {
-                  padding: 1rem;
-                  display: flex;
-                  align-items: center;
-                  border-radius: 1rem;
-                  background: #eee;
-                  // color: #fff;
-                  // font-weight: 600;
-                  > i {
-                    display: flex;
-                    margin-left: 1rem;
-                    cursor: pointer;
-                  }
-                }
-                > .input {
-                  display: flex;
-                  align-items: center;
-                  border-radius: 2rem;
-                  border: 2px solid #000;
-                  overflow: hidden;
-                  padding: 0 1rem;
-                  input {
-                    border: none;
-                    height: 3rem;
-                    width: 10rem;
-                    font-size: 1.2rem;
-                    background: rgba(0, 0, 0, 0);
-                  }
-                }
-                > .error {
-                  color: red;
-                  text-align: center;
-                  font-size: 1.2rem;
-                }
-              }
-              > .discountsPrice {
-                font-weight: 600;
-                color: red;
-              }
-            }
-          }
-          &.active {
-            background: #0ea98233;
-            border: 2px solid #0ea982;
-            > .priceBox {
-              > .left {
-                > p:nth-child(1) {
-                  opacity: 1;
-                }
-              }
-              > .right {
-                > .discountsPrice {
-                  opacity: 1;
-                }
-              }
-            }
-          }
-          &.sellWell {
-            border: 2px solid #0ea982;
-          }
-        }
-        > .productItem:last-child {
-          margin-bottom: 2rem;
-        }
-      }
-      > .payment {
-        margin-top: auto;
-        > .allocation {
-          // border-radius: 1rem;
-          // border: 2px solid #eaecf0;
-          // padding: 1rem 1.2rem;
-
-          > .selectType {
-            display: flex;
-            > .text {
-              font-size: 1.4rem;
-              font-weight: 600;
-              margin-right: 2rem;
-            }
-            label {
-              margin-right: 1rem;
-              display: flex;
-              cursor: pointer;
-              input {
-                margin-right: 0.5rem;
-              }
-            }
-          }
-        }
-
-        > .gallery_btn {
-          width: 100%;
-          margin: 2rem 0;
-		  margin-bottom: .5rem;
-          margin-top: 1rem;
-        }
-        > .payMethod_payAffirm_clause {
-			text-align: center;
+	  > .left {
+		width: 50%;
+		background: #0f0f0f;
+		color: #fff;
+		padding: 4rem 3.2rem;
+		position: relative;
+		display: flex;
+		  flex-direction: column;
+		> .video{
+		  position: absolute;
+		  width: 100%;
+		  height: 100%;
+		  left: 0;
+		  top: 0;
+		  > video{
+			  width: 100%;
+			  height: 100%;
+			  object-fit: cover;
+		  }
+		  > .mask{
+			  position: absolute;
+			  width: 100%;
+			  height: 100%;
+			  left: 0;
+			  top: 0;
+			  background: rgba(0,0,0,.5);
+		  }
+		}
+	   
+		> .title {
+		  opacity: 1;
+		  // color: #fff;	
+		}
+		> .content {
+		  flex-wrap: wrap;
+		  flex-direction: row;
+		  flex: 1;
+		  align-content: center;
+		  align-items: center;
+		  justify-content: center;
+		  > .benefitsItem {
 			display: flex;
-			flex-direction: column;
-			align-items: center;
-          label {
-            input {
-              margin-right: 1rem;
-              cursor: pointer;
-              vertical-align: middle;
-            }
-            span {
-              vertical-align: top;
-              font-size: 1.4rem;
-              a {
-                color: #000;
-                text-decoration: underline;
-              }
-            }
-          }
-		  > .secure{
-			border: 1px solid #ededed;
-			background: #f1fbf9;
-			color: #1cb36c;
-			padding: .4rem .8rem;
-			border-radius: .5rem;
-			margin-top: 4rem;
-			> span{
-				display: flex;
-				align-items: center;
-			}
-			i{
-				display: flex;
-				margin-right: .5rem;
+			width: 50%;
+		  }
+		
+		  > .benefitsItem {
+			border-radius: 2.4rem;
+			margin-bottom: 1.6rem;
+			padding: 1.6rem;
+		  justify-content: center;
+			> .describe {
+			  display: flex;
+			  align-items: center;
+			  flex-direction: column;
+			  > .icon {
+			  //   border: 1px solid #27272a;
+			  //   background: linear-gradient(#1d1d1d, #000);
+			  //   border-radius: 1.4rem;
+			  //   margin-right: 1.6rem;
+			  //   padding: 1.4rem;
+				> img {
+				  width: 12rem;
+				  height: 12rem;
+				}
+			  }
+			  > .text {
+				  text-align: center;
+				> p {
+				  margin: 0;
+				}
+				> .title {
+				  font-size: 2.1rem;
+				  font-weight: 600;
+				  line-height: 1;
+				}
+				> .info {
+				  font-weight: 600;
+				  margin-top: 0.4rem;
+				  font-size: 1.2rem;
+				  // opacity: 0.5;
+				}
+			  }
 			}
 		  }
-		  > .payIcon{
-			height: 2rem;
+		}
+	  }
+	  > .right {
+		width: 50%;
+		flex-direction: column;
+		align-items: center;
+		padding: 4rem 3.2rem;
+		> .content {
+		  margin-top: 2rem;
+		  > .productItem {
+			margin-bottom: 1rem;
+			border-radius: 1rem;
+			overflow: hidden;
+			border: 1.5px solid #eaecf0;
+  
+			> .popular {
+			  background: #2d9f75;
+			  font-weight: 600;
+			  display: flex;
+			  justify-content: center;
+			  align-items: center;
+			  color: #fff;
+			  padding: 0.8rem 1.2rem;
+			}
+			> .priceBox {
+			  height: 11rem;
+			  padding: 1rem 1.2rem;
+			  display: flex;
+			  justify-content: space-between;
+			  align-items: center;
+			  > .left,
+			  > .right {
+				p {
+				  margin: 0;
+				}
+				> .discountsPrice,
+				> .price {
+				  font-size: 1.8rem;
+				  margin-top: 0.4rem;
+				  opacity: 0.4;
+				  font-weight: 500;
+				}
+			  }
+			  > .left {
+				> p:nth-child(1) {
+				  font-size: 2rem;
+				  opacity: 0.7;
+				  font-weight: 700;
+				}
+			  }
+			  > .right {
+				> .promotion {
+				  display: flex;
+				  align-items: center;
+				  flex-direction: column;
+				  > .text {
+					font-size: 1.4rem;
+					font-weight: 600;
+					margin-right: 2rem;
+				  }
+				  > .succeed {
+					padding: 1rem;
+					display: flex;
+					align-items: center;
+					border-radius: 1rem;
+					background: #eee;
+					// color: #fff;
+					// font-weight: 600;
+					> i {
+					  display: flex;
+					  margin-left: 1rem;
+					  cursor: pointer;
+					}
+				  }
+				  > .input {
+					display: flex;
+					align-items: center;
+					border-radius: 2rem;
+					border: 2px solid #000;
+					overflow: hidden;
+					padding: 0 1rem;
+					input {
+					  border: none;
+					  height: 3rem;
+					  width: 10rem;
+					  font-size: 1.2rem;
+					  background: rgba(0, 0, 0, 0);
+					}
+				  }
+				  > .error {
+					color: red;
+					text-align: center;
+					font-size: 1.2rem;
+				  }
+				}
+				> .discountsPrice {
+				  font-weight: 600;
+				  color: red;
+				}
+			  }
+			}
+			&.active {
+			  background: #0ea98233;
+			  border: 2px solid #0ea982;
+			  > .priceBox {
+				> .left {
+				  > p:nth-child(1) {
+					opacity: 1;
+				  }
+				}
+				> .right {
+				  > .discountsPrice {
+					opacity: 1;
+				  }
+				}
+			  }
+			}
+			&.sellWell {
+			  border: 2px solid #0ea982;
+			}
+		  }
+		  > .productItem:last-child {
+			margin-bottom: 2rem;
+		  }
+		}
+		> .payment {
+		  margin-top: auto;
+		  > .allocation {
+			// border-radius: 1rem;
+			// border: 2px solid #eaecf0;
+			// padding: 1rem 1.2rem;
+  
+			> .selectType {
+			  display: flex;
+			  > .text {
+				font-size: 1.4rem;
+				font-weight: 600;
+				margin-right: 2rem;
+			  }
+			  label {
+				margin-right: 1rem;
+				display: flex;
+				cursor: pointer;
+				input {
+				  margin-right: 0.5rem;
+				}
+			  }
+			}
+		  }
+  
+		  > .gallery_btn {
+			width: 100%;
+			margin: 2rem 0;
+			margin-bottom: .5rem;
 			margin-top: 1rem;
-			img{
-				margin: 0 .3rem;
-				height: 100%;
+		  }
+		  > .payMethod_payAffirm_clause {
+			  text-align: center;
+			  display: flex;
+			  flex-direction: column;
+			  align-items: center;
+			label {
+			  input {
+				margin-right: 1rem;
+				cursor: pointer;
+				vertical-align: middle;
+			  }
+			  span {
+				vertical-align: top;
+				font-size: 1.4rem;
+				a {
+				  color: #000;
+				  text-decoration: underline;
+				}
+			  }
+			}
+			> .secure{
+			  border: 1px solid #ededed;
+			  background: #f1fbf9;
+			  color: #1cb36c;
+			  padding: .4rem .8rem;
+			  border-radius: .5rem;
+			  margin-top: 4rem;
+			  > span{
+				  display: flex;
+				  align-items: center;
+			  }
+			  i{
+				  display: flex;
+				  margin-right: .5rem;
+			  }
+			}
+			> .payIcon{
+			  height: 2rem;
+			  margin-top: 1rem;
+			  img{
+				  margin: 0 .3rem;
+				  height: 100%;
+			  }
+			}
+			&.animation {
+			  animation: shake 0.3s linear;
+			  @keyframes shake {
+				0% {
+				  transform: translateX(0px);
+				}
+				25% {
+				  transform: translateX(-10px);
+				}
+				50% {
+				  transform: translateX(10px);
+				}
+				75% {
+				  transform: translateX(-10px);
+				}
+				100% {
+				  transform: translateX(0px);
+				}
+			  }
 			}
 		  }
-          &.animation {
-            animation: shake 0.3s linear;
-            @keyframes shake {
-              0% {
-                transform: translateX(0px);
-              }
-              25% {
-                transform: translateX(-10px);
-              }
-              50% {
-                transform: translateX(10px);
-              }
-              75% {
-                transform: translateX(-10px);
-              }
-              100% {
-                transform: translateX(0px);
-              }
-            }
-          }
-        }
-        // > .paySecure{
-        // 	display: flex;
-        // 	margin-top: 1rem;
-        // 	> svg{
-        // 		width: 1.6rem;
-        // 		height: 1.6rem;
-        // 	}
-        // 	> span{
-        // 		font-weight: 600;
-        // 		font-size: 1.4rem;
-        // 	}
-        // }
-      }
-    }
-    // .login_footer_item_text{
-    // 	text-align: center;
-    // 	margin-bottom: 1.5rem;
-    // 	text-decoration: underline;
-    // }
-    // .login_footer_item_text:last-child{
-    // 	margin-bottom: 0rem;
-    // }
+		  // > .paySecure{
+		  // 	display: flex;
+		  // 	margin-top: 1rem;
+		  // 	> svg{
+		  // 		width: 1.6rem;
+		  // 		height: 1.6rem;
+		  // 	}
+		  // 	> span{
+		  // 		font-weight: 600;
+		  // 		font-size: 1.4rem;
+		  // 	}
+		  // }
+		}
+	  }
+	  // .login_footer_item_text{
+	  // 	text-align: center;
+	  // 	margin-bottom: 1.5rem;
+	  // 	text-decoration: underline;
+	  // }
+	  // .login_footer_item_text:last-child{
+	  // 	margin-bottom: 0rem;
+	  // }
+	}
+	.mark_loading {
+	  position: absolute;
+	  z-index: 2;
+	  background: #fff;
+	  border-radius: 3rem;
+	  .mark_loading_title {
+		font-size: 3rem;
+		// text-decoration: underline;
+		font-weight: 600;
+		margin-bottom: 2rem;
+		overflow: hidden;
+		// color: #fff;
+	  }
+	  .mark_loading_intro {
+		color: rgba(0, 0, 0, 0.6);
+		font-size: 1.4rem;
+		margin-bottom: 2rem;
+		text-align: center;
+		width: 80%;
+	  }
+	  .mark_loading_title_box {
+		display: flex;
+	  }
+  
+	  .mark_loading_btn,
+	  .mark_loading_btn2 {
+		// border: #000;
+		// color: #fff;
+		display: flex;
+		margin-top: 10px;
+		text-align: center;
+		border: 2px solid;
+		padding: 0 20px;
+		border-radius: 10px;
+		cursor: pointer;
+		padding: 0.3rem 4rem;
+		background: #000;
+		color: #fff;
+		border: none;
+		margin: 0 2rem;
+		align-items: center;
+	  }
+	  .mark_loading_btn2 {
+		border: 2px solid #000;
+		color: #000;
+		background: rgba(0, 0, 0, 0);
+	  }
+	}
   }
-  .mark_loading {
-    position: absolute;
-    z-index: 2;
-    background: #fff;
-    border-radius: 3rem;
-    .mark_loading_title {
-      font-size: 3rem;
-      // text-decoration: underline;
-      font-weight: 600;
-      margin-bottom: 2rem;
-      overflow: hidden;
-      // color: #fff;
-    }
-    .mark_loading_intro {
-      color: rgba(0, 0, 0, 0.6);
-      font-size: 1.4rem;
-      margin-bottom: 2rem;
-      text-align: center;
-      width: 80%;
-    }
-    .mark_loading_title_box {
-      display: flex;
-    }
-
-    .mark_loading_btn,
-    .mark_loading_btn2 {
-      // border: #000;
-      // color: #fff;
-      display: flex;
-      margin-top: 10px;
-      text-align: center;
-      border: 2px solid;
-      padding: 0 20px;
-      border-radius: 10px;
-      cursor: pointer;
-      padding: 0.3rem 4rem;
-      background: #000;
-      color: #fff;
-      border: none;
-      margin: 0 2rem;
-      align-items: center;
-    }
-    .mark_loading_btn2 {
-      border: 2px solid #000;
-      color: #000;
-      background: rgba(0, 0, 0, 0);
-    }
-  }
-}
-</style>
+  </style>
+  
\ No newline at end of file