From 4ab457808156b4965fb2ad10ddf85f369233b79b Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Fri, 12 Dec 2025 10:04:28 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=AE=A2=E9=98=85=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/component/HomePage/renew.vue b/src/component/HomePage/renew.vue
index 9d48c5a0..f9197d79 100644
--- a/src/component/HomePage/renew.vue
+++ b/src/component/HomePage/renew.vue
@@ -1,956 +1,987 @@
 <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>
-		  <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">
+  <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>
+        <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">HK $  {{ 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 class="apply-btn" @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;
-		}
-		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;
-		  }
-		  > .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;
-			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 #E7EBFF;
-			cursor: pointer;
-  
-			> .popular {
-			  background: #1B223C;
-			  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,&:hover {
-				// 40% opacity
-			  background: rgba(231, 235, 255, 0.4);
-			  // border: 2px solid #0ea982;
-			 
-			}
-			&.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;
-			background: #1B223C;
-			color: #fff;
-		  }
-		  > .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);
-				}
-			  }
-			}
-		  }
-		  // > .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);
-	  }
-	}
+        </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
+      }
+      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)
+    }
   }
-  </style>
-  
\ No newline at end of file
+})
+</script>
+<style lang="less" scoped>
+.renew {
+  :deep(.ant-modal-body) {
+    padding: 0;
+  }
+  .renewContent {
+    display: flex;
+    border-radius: 3rem;
+    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;
+        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;
+        }
+        > .mask {
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          left: 0;
+          top: 0;
+          background: rgba(0, 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;
+          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 #e7ebff;
+          cursor: pointer;
+
+          > .popular {
+            background: #1b223c;
+            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: 1.5px solid rgb(216, 218, 220);
+                  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,
+          &:hover {
+            // 40% opacity
+            background: rgba(231, 235, 255, 0.4);
+            // border: 2px solid #0ea982;
+          }
+          &.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: 0.5rem;
+          margin-top: 1rem;
+          background: #1b223c;
+          color: #fff;
+        }
+        > .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: 0.4rem 0.8rem;
+            border-radius: 0.5rem;
+            margin-top: 4rem;
+            > span {
+              display: flex;
+              align-items: center;
+            }
+            i {
+              display: flex;
+              margin-right: 0.5rem;
+            }
+          }
+          > .payIcon {
+            height: 2rem;
+            margin-top: 1rem;
+            img {
+              margin: 0 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);
+              }
+            }
+          }
+        }
+        // > .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);
+    }
+  }
+}
+</style>