update ui

src/pages/index/index.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="index">
     <div class="index_page">
-      <img class="logo" src="@/assets/img/logo.png" alt="" />
+      <!-- <img class="logo" src="@/assets/img/logo.png" alt="" />
-      <img class="title" src="@/assets/img/title.png" alt="" />
+      <img class="title" src="@/assets/v2/title.png" alt="" /> -->
+      <img class="bg-top" src="@/assets/v2/bg-top.png" alt="" />
       <img
         class="rule"
         @click="toRule"
@@ -16,16 +17,20 @@
         alt=""
       />
       <div class="money">
-        <img class="remain" src="@/assets/img/remain.png" alt="" />
+        <!-- <img class="remain" src="@/assets/img/remain.png" alt="" /> -->
-        <van-rolling-text
+        <span class="remain-word">剩余</span>
+        <div>
+          <van-rolling-text
           class="my-rolling-text"
           :start-num="number"
-          :height="fontSize * 0.84"
+          :height="fontSize * 0.5"
           :target-num="num"
           direction="up"
           ref="rollingTextRef"
         />
-        <div class="item1">份</div>
+        </div>
+        <div class="remain-word">份</div>
+        <div style="flex:1" />
         <div class="refresh" @click="getNumber"></div>
       </div>
       <div class="content-box">
@@ -37,11 +42,11 @@
                 class="line_clamp1"
                 :style="{ color: form.code ? '#000' : '#c79f9c' }"
               >
-                {{ form.code ? form.code : "请扫码识别代金券二维码" }}
+                {{ form.code ? form.code : "请扫码识别代金券" }}
               </p>
               <div class="scan-btn" @click="handleScan">
                 <img
-                  src="@/assets/img/scan-icon.png"
+                  src="@/assets/v2/scan-icon.png"
                   class="scan-icon"
                   alt=""
                 />
@@ -50,19 +55,19 @@
             </div>
           </div>  
           <div class="content-item">
-            <div class="content-title">结婚证字号</div>
+            <div class="content-title1" style="width: 2.2rem;">结婚证字号</div>
             <div class="input-box">
               <input
                 disabled
                 type="text"
                 v-model="form.marriageNo"
                 class="input-item"
-                placeholder="请输入结婚证字号数字"
+                placeholder="请输入结婚证字号"
               />
             </div>
           </div>
           <div class="content-item">
-            <div class="content-title">领取人姓名</div>
+            <div class="content-title1" style="width: 2.2rem;">领取人姓名</div>
             <div class="input-box">
               <input
                 disabled
@@ -74,7 +79,7 @@
             </div>
           </div>
           <div class="content-item">
-            <div class="content-title">领取人手机号</div>
+            <div class="content-title1" style="width: 2.4rem;">领取人手机号</div>
             <div class="input-box">
               <input
                 disabled
@@ -88,7 +93,7 @@
             </div>
           </div>
           <div class="content-item">
-            <div class="content-title">验证码</div>
+            <div class="content-title1" style="width: 1.7rem;">验证码</div>
             <div class="input-box code-box">
               <input
                 type="text"
@@ -104,9 +109,9 @@
           <div class="login-btn" @click="submit">提交</div>
         </div>
       </div>
-      <img class="person-icon" src="@/assets/img/person-icon.png" alt="" />
+      <!-- <img class="person-icon" src="@/assets/img/person-icon.png" alt="" /> -->
-      <img class="ggl-icon1" src="@/assets/img/ggl-icon1.png" alt="" />
+      <!-- <img class="ggl-icon1" src="@/assets/img/ggl-icon1.png" alt="" />
-      <img class="ggl-icon2" src="@/assets/img/ggl-icon2.png" alt="" />
+      <img class="ggl-icon2" src="@/assets/img/ggl-icon2.png" alt="" /> -->
     </div>
   </div>
 </template>
@@ -372,20 +377,26 @@ input {
 .index_page {
   width: 100%;
   min-height: 16.32rem;
-  background: url("@/assets/img/bg.png") top center / 100% 16.32rem no-repeat;
+  background: url("@/assets/v2/bg.jpg") top center / 100% 100% no-repeat;
   overflow: hidden;
   position: relative;
+  .bg-top {
+    width: 100%;
+    height: auto;
+    display: block;
+  }
   .logo {
     width: 3.32rem;
     height: 0.66rem;
-    margin-top: 0.26rem;
+    margin: 0.26rem auto 0;
-    margin-left: 0.3rem;
+    margin-bottom: 0.1rem;
+    display: block;
   }
   .rule {
     width: 0.55rem;
     height: 1.66rem;
     position: absolute;
-    top: 1.26rem;
+    top: 2rem;
     left: 0;
     cursor: pointer;
   }
@@ -393,29 +404,42 @@ input {
     width: 0.55rem;
     height: 1.66rem;
     position: absolute;
-    top: 1.26rem;
+    top: 2rem;
     right: 0;
     cursor: pointer;
   }
   .title {
     width: 6.45rem;
-    height: 1.94rem;
     margin: 0 auto;
     display: block;
     animation: titleAnimate linear 1.5s alternate infinite;
   }
 }
 .money {
-  width: 100%;
+  background: #CD3032;
+  // 内阴影
+  box-shadow: inset 0px 0.01rem 0.01rem 0px rgba(0, 0, 0, 0.25);
+  width: 6.4rem;
+  height: 1.1rem !important;
   display: flex;
   align-items: center;
-  justify-content: center;
+  padding-left: 0.3rem;
-  margin: 0.32rem auto 0;
+  justify-content: flex-start;
+  border-top-left-radius: 0.2rem;
+  border-top-right-radius: 0.2rem;
+  margin: -1.3rem auto 0;
+  position: relative;
+  z-index: 1;
   .remain {
     width: 1.02rem;
     height: 0.53rem;
     margin-right: 0.1rem;
   }
+  .remain-word {
+    font-size: 0.32rem;
+    color: #FFE9AA;
+    margin-right: 0.1rem;
+  }
   .my-rolling-text {
     // --van-rolling-text-background: #1989fa;
     --van-rolling-text-color: white;
@@ -423,11 +447,14 @@ input {
     --van-rolling-text-gap: 6px;
     --van-rolling-text-item-border-radius: 5px;
     --van-rolling-text-item-width: 40px;
+    display: flex;
+    align-items: center;
+    height: 0.84rem;
   }
   .item1 {
     width: 0.6rem;
-    height: 0.84rem;
+    height: 0.6rem;
-    line-height: 0.84rem;
+    line-height: 0.6rem;
     font-weight: bold;
     text-align: center;
     overflow: hidden;
@@ -441,36 +468,40 @@ input {
   .refresh {
     width: 0.54rem;
     height: 0.52rem;
-    background: url("@/assets/img/refresh.png") top center / 100% 100% no-repeat;
+    background: url("@/assets/v2/refresh.png") top center / 100% 100% no-repeat;
     margin-left: 0.1rem;
+    margin-right: 0.3rem;
   }
 }
 .content-box {
   width: 6.9rem;
-  background: #f6b8b8;
+  // background: #f6b8b8;
-  border-radius: 0.3rem;
+  background: url("@/assets/v2/content-bg.png") top center / 100% 100%
+    no-repeat;
+  height: auto;
   margin: 0.46rem auto 0;
+  margin-top: 0;
+  margin-bottom: 1rem;
   overflow: hidden;
   padding: 0.2rem;
   box-sizing: border-box;
   .content-main {
     width: 100%;
     height: 100%;
-    background: #fef5f5;
     border-radius: 0.2rem;
     margin: 0 auto 0;
     overflow: hidden;
     padding-bottom: 0.5rem;
     .login-btn {
       width: 3.2rem;
-      height: 0.8rem;
+      height: 0.9rem;
       background: #ea3a3a;
-      border-radius: 0.4rem;
+      border-radius: 0.5rem;
-      font-weight: bold;
+      font-weight: 500;
-      font-size: 0.32rem;
+      font-size: 0.35rem;
       color: #ffffff;
       text-align: center;
-      line-height: 0.8rem;
+      line-height: 0.9rem;
       margin: 0.6rem auto 0;
     }
     .content-item {
@@ -493,10 +524,11 @@ input {
         margin: 0 auto 0;
       }
       .content-title1 {
-        width: 3.8rem;
+        width: 3.4rem;
         height: 0.53rem;
-        background: url("@/assets/img/title-bg1.png") top center / 100% 100%
+        background-color: #F9E9EA;
-          no-repeat;
+        border-top-left-radius: 0.2rem;
+        border-top-right-radius: 0.2rem;
         font-weight: bold;
         font-size: 0.3rem;
         color: #97221a;
@@ -507,7 +539,8 @@ input {
       .input-box {
         width: 5.76rem;
         height: 0.9rem;
-        background: #ffffff;
+        background: #F9F9F9;
+        border: 0.02rem solid #EDEDED;
         border-radius: 0.2rem;
         font-size: 0.32rem;
         color: #333333;
@@ -527,19 +560,20 @@ input {
           .input-box1 {
             width: 2.8rem;
             margin-left: 0;
+            background: transparent;
           }
         }
         .input-item {
           width: 100%;
           height: 100%;
-          background: #ffffff;
           border-radius: 0.2rem;
         }
       }
       .scan-box {
         width: 5.76rem;
         height: 0.9rem;
-        background: #f2dede;
+        background: #F9F9F9;
+        border: 0.02rem solid #EDEDED;
         border-radius: 0.2rem;
         font-size: 0.28rem;
         color: #c79f9c;
@@ -554,7 +588,7 @@ input {
           align-items: center;
           width: 1.99rem;
           height: 0.62rem;
-          background: #ffffff;
+          background: #E8424D;
           border-radius: 0.1rem;
           justify-content: space-evenly;
           margin-left: 0.1rem;
@@ -564,7 +598,7 @@ input {
           }
           p {
             font-size: 0.32rem;
-            color: #ea3a3a;
+            color: white;
           }
         }
         > p {
@@ -600,24 +634,25 @@ input {
 ::v-deep(.van-rolling-text-item) {
   width: auto;
   margin-right: 0;
-  width: 0.6rem;
+  width: 0.5rem;
-  height: 0.84rem !important;
+  height: 0.5rem !important;
-  background: linear-gradient(0deg, #ff2020, #ff7a4e);
+  background: #FFF1CB;
   box-shadow: 0px 0.06rem 0.1rem 0px rgba(252, 59, 13, 0.45);
   border-radius: 0.1rem;
-  border: 0.02rem solid #ffffff;
+  // border: 0.02rem solid #ffffff;
+  margin-right: 0.1rem !important;
 }
 ::v-deep(.van-rolling-text-item__box) {
-  line-height: 0.84rem;
+  font-weight: 500;
-  font-weight: bold;
+  line-height: 0.5rem;
   text-align: center;
   overflow: hidden;
-  font-size: 0.71rem;
+  font-size: 0.4rem;
-  color: #ffffff;
+  color: #950D0F;
 }
 ::v-deep(.van-rolling-text-item__item) {
-  height: 0.84rem !important;
+  height: 0.5rem !important;
-  line-height: 0.84rem !important;
+  line-height: 0.5rem !important;
   overflow: hidden;
 }
 </style>

src/pages/index/index_old.vue

@@ -1,615 +0,0 @@
-<template>
-  <div class="index">
-    <div class="index_page">
-      <img class="logo" src="@/assets/img/logo.png" alt="" />
-      <img class="title" src="@/assets/img/title.png" alt="" />
-      <img
-        class="rule"
-        @click="toRule"
-        src="@/assets/img/rule-btn.png"
-        alt=""
-      />
-      <img
-        class="record"
-        @click="toRecord"
-        src="@/assets/img/record-btn.png"
-        alt=""
-      />
-      <div class="money">
-        <img class="remain" src="@/assets/img/remain.png" alt="" />
-        <van-rolling-text
-          class="my-rolling-text"
-          :start-num="number"
-          :height="fontSize * 0.84"
-          :target-num="num"
-          direction="up"
-          ref="rollingTextRef"
-        />
-        <div class="item1">份</div>
-        <div class="refresh" @click="getNumber"></div>
-      </div>
-      <div class="content-box">
-        <div class="content-main">
-          <div class="content-item">
-            <div class="content-title">结婚证字号</div>
-            <div class="input-box">
-              <input
-                type="text"
-                v-model="form.marriageNo"
-                class="input-item"
-                placeholder="请输入结婚证字号数字"
-              />
-            </div>
-          </div>
-          <div class="content-item">
-            <div class="content-title">领取人姓名</div>
-            <div class="input-box">
-              <input
-                type="text"
-                v-model="form.receiveName"
-                class="input-item"
-                placeholder="请输入领取人姓名"
-              />
-            </div>
-          </div>
-          <div class="content-item">
-            <div class="content-title1">刮刮乐代金券二维码</div>
-            <div class="scan-box">
-              <p
-                class="line_clamp1"
-                :style="{ color: form.code ? '#000' : '#c79f9c' }"
-              >
-                {{ form.code ? form.code : "请扫码识别代金券二维码" }}
-              </p>
-              <div class="scan-btn" @click="handleScan">
-                <img
-                  src="@/assets/img/scan-icon.png"
-                  class="scan-icon"
-                  alt=""
-                />
-                <p>扫码识别</p>
-              </div>
-            </div>
-          </div>
-          <div class="content-item">
-            <div class="content-title">领取人手机号</div>
-            <div class="input-box">
-              <input
-                type="text"
-                class="input-item"
-                v-model="form.receiveMobile"
-                placeholder="请输入领取人手机号"
-                maxlength="11"
-                oninput="if(value.length>11)value=value.slice(0,11)"
-              />
-            </div>
-          </div>
-          <div class="content-item">
-            <div class="content-title">验证码</div>
-            <div class="input-box code-box">
-              <input
-                type="text"
-                class="input-box1"
-                v-model="form.smsCode"
-                placeholder="请输入验证码"
-                maxlength="6"
-                oninput="if(value.length>6)value=value.slice(0,6)"
-              />
-              <div class="code" @click="getCode">{{ codeTitle }}</div>
-            </div>
-          </div>
-          <div class="login-btn" @click="submit">提交</div>
-        </div>
-      </div>
-      <img class="person-icon" src="@/assets/img/person-icon.png" alt="" />
-      <img class="ggl-icon1" src="@/assets/img/ggl-icon1.png" alt="" />
-      <img class="ggl-icon2" src="@/assets/img/ggl-icon2.png" alt="" />
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref, onMounted, onUnmounted, reactive } from "vue";
-import { useRouter } from "vue-router";
-import { showToast } from "vant";
-import { Local } from "@/utils/storage.js";
-import {
-  getSms,
-  leftOverCount,
-  receiveCheck,
-  wechatConfig,
-} from "@/api/index.js";
-import wx from "weixin-js-sdk";
-const phoneRegex = /^1[3-9]\d{9}$/;
-const router = useRouter();
-const codeTitle = ref("获取验证码");
-const codeTime = ref(60);
-const disabled = ref(false);
-const number = ref("00000");
-const num = ref("00000");
-const fontSize = ref(0);
-const rollingTextRef = ref(null);
-const currentUrl = ref(window.location.href.split("#")[0]);
-const form = reactive({
-  receiveMobile: "",
-  smsCode: "",
-  code: "",
-  marriageNo: "",
-  receiveName: "",
-});
-// 监听HTML的fontSize变化
-let fontSizeObserver = null;
-
-const login = () => {
-  router.push({ name: "Login" });
-};
-const toRule = () => {
-  router.push({ name: "Rule" });
-};
-const toRecord = () => {
-  router.push({ name: "Record" });
-};
-function timeWait(time) {
-  disabled.value = true;
-  setTimeout(function () {
-    if (time >= 0) {
-      codeTitle.value = "重新获取(" + time + "s)";
-      time--;
-      timeWait(time);
-    } else {
-      codeTitle.value = "获取验证码";
-      codeTime.value = 60;
-      disabled.value = false;
-    }
-  }, 1000);
-}
-function getCode() {
-  if (disabled.value) return;
-  // 验证手机号不为空
-  if (form.receiveMobile == "") {
-    showToast("请输入手机号");
-    return;
-  } else if (!phoneRegex.test(form.receiveMobile)) {
-    showToast("请输入正确的手机号格式");
-    return;
-  }
-  disabled.value = true;
-  const params = {
-    mobile: form.receiveMobile,
-    type: 1,
-  };
-  getSms(params).then((res) => {
-    if (res.code == 200) {
-      showToast("验证码发送成功");
-      timeWait(codeTime.value);
-    } else {
-      showToast(res.msg);
-      disabled.value = false;
-    }
-  });
-}
-function getNumber() {
-  leftOverCount({}).then((res) => {
-    if (res.code == 200) {
-      // 确保不足5位前面补0
-      number.value = num.value;
-      num.value = String(res.data).padStart(5, "0");
-    } else {
-      showToast(res.msg);
-    }
-  });
-}
-// 初始化微信配置
-const initWechatConfig = async () => {
-  try {
-    const response = await wechatConfig({
-      url: currentUrl.value,
-    });
-    // const config = await response.json();
-    if (response.code == 200) {
-      wx.config({
-        debug: false, // 生产环境设为false
-        appId: response.data.appId,
-        timestamp: response.data.timestamp,
-        nonceStr: response.data.nonceStr,
-        signature: response.data.signature,
-        jsApiList: ["scanQRCode"], // 需要使用的JS接口列表
-      });
-
-      wx.ready(() => {
-        console.log("微信JS-SDK配置完成");
-      });
-
-      wx.error((err) => {
-        console.error("微信JS-SDK配置失败:", err);
-        showToast("微信初始化失败，请刷新页面重试");
-      });
-    }
-  } catch (error) {
-    console.error("获取微信配置失败:", error);
-  }
-};
-let scanBtn = ref(false);
-// 处理扫码
-const handleScan = () => {
-  if(scanBtn.value) return;
-  scanBtn.value = true;
-  setTimeout(() => {
-    scanBtn.value = false;
-  }, 1000);
-  wx.scanQRCode({
-    needResult: 1, // 1表示直接返回扫码结果
-    scanType: ["qrCode", "barCode"], // 可扫码类型
-    success: (res) => {
-      const result = res.resultStr; // 扫码结果
-      form.code = result;
-      console.log("扫码结果:", result);
-      // 在这里处理扫码结果
-      // alert(`扫码结果: ${result}`);
-    },
-    fail: (err) => {
-      if (err.errMsg.includes("permission denied")) {
-        showToast("扫码权限被拒绝，请允许访问相机");
-      } else {
-        showToast("扫码失败，请重试");
-      }
-    },
-  });
-};
-function submit() {
-  // 验证 marriageNo 不为空
-  if (form.marriageNo == "") {
-    showToast("请输入结婚证字号");
-    return;
-  }
-  // 验证姓名不为空
-  if (form.receiveName == "") {
-    showToast("请输入领取人姓名");
-    return;
-  }
-  // 验证姓名不为空
-  if (form.code == "") {
-    showToast("请扫描代金券二维码");
-    return;
-  }
-  // 验证手机号不为空
-  if (form.receiveMobile == "") {
-    showToast("请输入领取人手机号");
-    return;
-  } else if (!phoneRegex.test(form.receiveMobile)) {
-    showToast("请输入正确的手机号格式");
-    return;
-  }
-  // 验证验证码不为空
-  if (form.smsCode == "") {
-    showToast("请输入验证码");
-    return;
-  }
-  const params = {
-    ...form,
-    salesNo: Local.get("userInfo").salesNo,
-  };
-  receiveCheck(params).then((res) => {
-    if (res.code == 200) {
-      Local.set("marriageInfo", params);
-      router.push("/Signature");
-    } else {
-      showToast(res.msg);
-    }
-  });
-}
-onMounted(() => {
-  getNumber();
-  initWechatConfig();
-  // 创建MutationObserver实例来监听根元素的style变化
-  fontSizeObserver = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.attributeName === "style") {
-        const htmlElement = document.documentElement;
-        // 获取fontSize并提取数字部分
-        const fontSizeWithUnit = window
-          .getComputedStyle(htmlElement)
-          .getPropertyValue("font-size");
-        // 使用parseFloat保留小数部分
-        const currentFontSize = parseFloat(fontSizeWithUnit);
-        fontSize.value = currentFontSize;
-        // 这里可以添加其他需要在fontSize变化时执行的代码
-      }
-    });
-  });
-  const htmlElement = document.documentElement;
-  // 获取fontSize并提取数字部分
-  const fontSizeWithUnit = window
-    .getComputedStyle(htmlElement)
-    .getPropertyValue("font-size");
-  // 使用parseFloat保留小数部分
-  const currentFontSize = parseFloat(fontSizeWithUnit);
-  fontSize.value = currentFontSize;
-  // 开始观察根元素的style属性变化
-  fontSizeObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["style"],
-  });
-  rollingTextRef.value.start();
-});
-onUnmounted(() => {
-  // 组件卸载时停止观察
-  if (fontSizeObserver) {
-    fontSizeObserver.disconnect();
-    fontSizeObserver = null;
-  }
-});
-</script>
-<style scoped lang="scss">
-@keyframes titleAnimate {
-  0% {
-    transform: scale(0.9);
-  }
-  100% {
-    transform: scale(0.99);
-  }
-}
-input {
-  border: none;
-  margin: 0 auto;
-  font-size: 0.32rem;
-  &::placeholder {
-    color: #c79f9c;
-  }
-}
-.index {
-  background-color: #f46f71;
-  width: 100vw;
-  height: 100vh;
-}
-.index_page {
-  width: 100%;
-  min-height: 16.32rem;
-  background: url("@/assets/img/bg.png") top center / 100% 16.32rem no-repeat;
-  overflow: hidden;
-  position: relative;
-  .logo {
-    width: 3.32rem;
-    height: 0.66rem;
-    margin-top: 0.26rem;
-    margin-left: 0.3rem;
-  }
-  .rule {
-    width: 0.55rem;
-    height: 1.66rem;
-    position: absolute;
-    top: 1.26rem;
-    left: 0;
-    cursor: pointer;
-  }
-  .record {
-    width: 0.55rem;
-    height: 1.66rem;
-    position: absolute;
-    top: 1.26rem;
-    right: 0;
-    cursor: pointer;
-  }
-  .title {
-    width: 6.45rem;
-    height: 1.94rem;
-    margin: 0 auto;
-    display: block;
-    animation: titleAnimate linear 1.5s alternate infinite;
-  }
-}
-.money {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0.32rem auto 0;
-  .remain {
-    width: 1.02rem;
-    height: 0.53rem;
-    margin-right: 0.1rem;
-  }
-  .my-rolling-text {
-    // --van-rolling-text-background: #1989fa;
-    --van-rolling-text-color: white;
-    --van-rolling-text-font-size: 24px;
-    --van-rolling-text-gap: 6px;
-    --van-rolling-text-item-border-radius: 5px;
-    --van-rolling-text-item-width: 40px;
-  }
-  .item1 {
-    width: 0.6rem;
-    height: 0.84rem;
-    line-height: 0.84rem;
-    font-weight: bold;
-    text-align: center;
-    overflow: hidden;
-    font-size: 0.36rem;
-    color: #ffffff;
-    background: linear-gradient(0deg, #ff2020, #ff7a4e);
-    box-shadow: 0px 0.06rem 0.1rem 0px rgba(252, 59, 13, 0.45);
-    border-radius: 0.1rem;
-    border: 0.02rem solid #ffffff;
-  }
-  .refresh {
-    width: 0.54rem;
-    height: 0.52rem;
-    background: url("@/assets/img/refresh.png") top center / 100% 100% no-repeat;
-    margin-left: 0.1rem;
-  }
-}
-.content-box {
-  width: 6.9rem;
-  background: #f6b8b8;
-  border-radius: 0.3rem;
-  margin: 0.46rem auto 0;
-  overflow: hidden;
-  padding: 0.2rem;
-  box-sizing: border-box;
-  .content-main {
-    width: 100%;
-    height: 100%;
-    background: #fef5f5;
-    border-radius: 0.2rem;
-    margin: 0 auto 0;
-    overflow: hidden;
-    padding-bottom: 0.5rem;
-    .login-btn {
-      width: 3.2rem;
-      height: 0.8rem;
-      background: #ea3a3a;
-      border-radius: 0.4rem;
-      font-weight: bold;
-      font-size: 0.32rem;
-      color: #ffffff;
-      text-align: center;
-      line-height: 0.8rem;
-      margin: 0.6rem auto 0;
-    }
-    .content-item {
-      width: 100%;
-      text-align: center;
-      margin-bottom: 0.18rem;
-      &:nth-child(1) {
-        margin-top: 0.28rem;
-      }
-      .content-title {
-        width: 3.2rem;
-        height: 0.53rem;
-        background: url("@/assets/img/title-bg.png") top center / 100% 100%
-          no-repeat;
-        font-weight: bold;
-        font-size: 0.3rem;
-        color: #97221a;
-        line-height: 0.53rem;
-        text-align: center;
-        margin: 0 auto 0;
-      }
-      .content-title1 {
-        width: 3.8rem;
-        height: 0.53rem;
-        background: url("@/assets/img/title-bg1.png") top center / 100% 100%
-          no-repeat;
-        font-weight: bold;
-        font-size: 0.3rem;
-        color: #97221a;
-        line-height: 0.53rem;
-        text-align: center;
-        margin: 0.28rem auto 0;
-      }
-      .input-box {
-        width: 5.76rem;
-        height: 0.9rem;
-        background: #ffffff;
-        border-radius: 0.2rem;
-        font-size: 0.32rem;
-        color: #333333;
-        padding-left: 0.3rem;
-        box-sizing: border-box;
-        margin: 0 auto;
-        &.code-box {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          margin: 0 auto;
-          .code {
-            font-size: 0.32rem;
-            color: #ea3a3a;
-            margin-right: 0.3rem;
-          }
-          .input-box1 {
-            width: 2.8rem;
-            margin-left: 0;
-          }
-        }
-        .input-item {
-          width: 100%;
-          height: 100%;
-          background: #ffffff;
-          border-radius: 0.2rem;
-        }
-      }
-      .scan-box {
-        width: 5.76rem;
-        height: 0.9rem;
-        background: #f2dede;
-        border-radius: 0.2rem;
-        font-size: 0.28rem;
-        color: #c79f9c;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 0 0.2rem 0 0.3rem;
-        box-sizing: border-box;
-        margin: 0 auto;
-        .scan-btn {
-          display: flex;
-          align-items: center;
-          width: 1.99rem;
-          height: 0.62rem;
-          background: #ffffff;
-          border-radius: 0.1rem;
-          justify-content: space-evenly;
-          margin-left: 0.1rem;
-          .scan-icon {
-            width: 0.3rem;
-            height: 0.3rem;
-          }
-          p {
-            font-size: 0.32rem;
-            color: #ea3a3a;
-          }
-        }
-        > p {
-          font-size: 0.32rem;
-          flex: 1;
-          text-align: left;
-        }
-      }
-    }
-  }
-}
-.person-icon {
-  width: 2.3rem;
-  height: 2.9rem;
-  position: absolute;
-  left: 0.22rem;
-  bottom: 0;
-}
-.ggl-icon1 {
-  width: 0.96rem;
-  height: 1.22rem;
-  position: absolute;
-  top: 4.19rem;
-  left: 0.08rem;
-}
-.ggl-icon2 {
-  width: 1.2rem;
-  height: 1.17rem;
-  position: absolute;
-  top: 11.9rem;
-  right: 0;
-}
-::v-deep(.van-rolling-text-item) {
-  width: auto;
-  margin-right: 0;
-  width: 0.6rem;
-  height: 0.84rem !important;
-  background: linear-gradient(0deg, #ff2020, #ff7a4e);
-  box-shadow: 0px 0.06rem 0.1rem 0px rgba(252, 59, 13, 0.45);
-  border-radius: 0.1rem;
-  border: 0.02rem solid #ffffff;
-}
-::v-deep(.van-rolling-text-item__box) {
-  line-height: 0.84rem;
-  font-weight: bold;
-  text-align: center;
-  overflow: hidden;
-  font-size: 0.71rem;
-  color: #ffffff;
-}
-::v-deep(.van-rolling-text-item__item) {
-  height: 0.84rem !important;
-  line-height: 0.84rem !important;
-  overflow: hidden;
-}
-</style>