Merge branch 'milestone-20250820-金币兑换Token' into dev

.env.development

@@ -13,6 +13,8 @@ VITE_APP_API_BASE_URL = "https://hwjb.homilychart.com"
 # VITE_APP_API_BASE_CAZE_URL = "https://api.homilychart.com/link"
 VITE_APP_API_BASE_CAZE_URL = "https://hwjb.homilychart.com"
 
+VITE_APP_API_BASE_HW_URL = "http://39.101.133.168:8828/hljw"
+
 VITE_APP_IMG_API_BASE_URL = "http://39.101.133.168:8828/hljw/api/aws/upload"
 #MJ API
 VITE_APP_MJ_API_BASE_URL = "http://192.168.9.19:8080/api"

.env.production

@@ -14,6 +14,7 @@ VITE_APP_API_BASE_URL = https://api.homilychart.com/link
 VITE_APP_API_BASE_CAZE_URL = "https://api.homilychart.com/link"
 # VITE_APP_API_BASE_CAZE_URL = "http://39.101.133.168:8828/link"
 
+VITE_APP_API_BASE_HW_URL = "https://api.homilychart.com/hljw"
 
 VITE_APP_IMG_API_BASE_URL = "https://api.homilychart.com/hljw/api/aws/upload"
 #MJ API

src/api/AIxiaocaishen.js

@@ -3,6 +3,7 @@ import request from "../utils/request";
 const APIurl = import.meta.env.VITE_APP_API_BASE_URL;
 const cozeAPIurl = import.meta.env.VITE_APP_API_BASE_CAZE_URL;
 const MJAPIurl = import.meta.env.VITE_APP_MJ_API_BASE_URL;
+const HWurl = import.meta.env.VITE_APP_API_BASE_HW_URL;
 //各个模块权限code接口
 export const pessionAPI = function (params) {
   return request({
@@ -303,3 +304,53 @@ export const clickRecordAPI = function (params) {
     data: params,
   });
 };
+
+// 8.18金币兑换Token start
+
+export const showExchangeAPI = function (params) {
+  return request({
+    url: `${APIurl}/api/showExchange`,
+    method: "POST",
+    data: params,
+    headers: {
+      token: localStorage.getItem("localToken"),
+    },
+  });
+};
+
+export const godExchangeAPI = function (params) {
+  return request({
+    url: `${APIurl}/api/godExchange`,
+    method: "POST",
+    data: params,
+    headers: {
+      token: localStorage.getItem("localToken"),
+    },
+  });
+};
+
+export const exchangeAPI = function (params) {
+  return request({
+    url: `${APIurl}/api/exchange`,
+    method: "POST",
+    data: params,
+  });
+};
+
+export const getGoldCoinAPI = function (params) {
+  return request({
+    url: `${HWurl}/api/haiwai/user/getGoldCoin`,
+    method: "POST",
+    data: params,
+  });
+};
+
+export const getUserInfoAPI = function (params) {
+  return request({
+    url: `${HWurl}/api/v2/member/info`,
+    method: "POST",
+    data: params,
+  });
+};
+
+// 8.18金币兑换Token end

src/store/chat.js

@@ -40,6 +40,7 @@ export const useChatStore = defineStore("chat", {
       this.kLineData.push(data);
     },
   },
+
   persist: {
     key: "chat_messages",
     storage: sessionStorage,

src/store/dataList.js

@@ -2,7 +2,7 @@ import { defineStore } from "pinia";
 import { ref, watch } from "vue";
 import { useUserStore } from "./userPessionCode";
 import { useLanguage } from "@/utils/languageService";
-import { dataListAPI } from "@/api/AIxiaocaishen";
+import { dataListAPI, getUserInfoAPI } from "@/api/AIxiaocaishen";
 // import { useSkeletonStore } from '@/utils/skeletonLoader'
 import { useRoute } from "vue-router";
 // const skeletonStore = useSkeletonStore()
@@ -25,6 +25,7 @@ export const useDataStore = defineStore("data", () => {
   const klineData = ref(null);
   const activeTabIndex = ref(null);
   const isFeedback = ref(false); // 用于控制是否显示反馈页面的标志
+  const userInfo = ref({});
   const setKlineData = (data) => {
     klineData.value = data;
   };
@@ -64,7 +65,7 @@ export const useDataStore = defineStore("data", () => {
   const market = ref(getQueryVariable("market"));
   const code = ref(getQueryVariable("code"));
   console.log(token.value); // 输出 token 的值，例如 "111"
-  const fetchChartData = async (market,code) => {
+  const fetchChartData = async (market, code) => {
     const getTokenString = String(localStorage.getItem("localToken"));
     // const getMarketString = String(localStorage.getItem("localMarket"));
     // const getCodeString = String(localStorage.getItem("localCode"));
@@ -155,6 +156,14 @@ export const useDataStore = defineStore("data", () => {
     return "";
   };
 
+  const getUserInfo = async () => {
+    const getTokenString = String(localStorage.getItem("localToken"));
+    const res = await getUserInfoAPI({
+      token: getTokenString || "",
+    });
+    userInfo.value = res.data;
+  };
+
   const isLoading = ref(true);
   const initData = async () => {
     isLoading.value = true;
@@ -182,9 +191,9 @@ export const useDataStore = defineStore("data", () => {
     () => window.location.ancestorOrigins,
     (newQuery, oldQuery) => {
       console.log("newQuery", newQuery);
-    //   if () {
-    //     fetchChartData();
-    //   }
+      //   if () {
+      //     fetchChartData();
+      //   }
     }
   );
 
@@ -214,5 +223,7 @@ export const useDataStore = defineStore("data", () => {
     getQueryVariable,
     setActiveTabIndex,
     isFeedback,
+    userInfo,
+    getUserInfo,
   };
 });

src/views/Selectmodel.vue

@@ -34,8 +34,7 @@ import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import { setHeight } from "@/utils/setHeight";
 import { useDataStore } from "@/store/dataList.js";
-const { getQueryVariable, setActiveTabIndex } = useDataStore();
-
+const { getQueryVariable, setActiveTabIndex, getUserInfo } = useDataStore();
 import robot from "@/assets/img/Selectmodel/机器人 拷贝.png";
 
 const router = useRouter();
@@ -59,6 +58,8 @@ onMounted(() => {
   //   "localToken",
   //   "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q"
   // );
+
+  getUserInfo();
 });
 
 const goToDBQBmodel = () => {

src/views/homePage.vue

@@ -2,7 +2,13 @@
 // 导入
 import { ref, computed, onMounted, watch, nextTick, onUnmounted, h } from "vue";
 import { setHeight } from "../utils/setHeight";
-import { getUserCountAPI } from "../api/AIxiaocaishen";
+import {
+  getUserCountAPI,
+  showExchangeAPI,
+  godExchangeAPI,
+  exchangeAPI,
+  getGoldCoinAPI,
+} from "../api/AIxiaocaishen";
 import { ElMessage } from "element-plus";
 import AIchat from "./AIchat.vue";
 import AIfind from "./AIfind.vue";
@@ -45,7 +51,7 @@ const aiEmotionRef = ref(null);
 // 获取历史记录组件的 ref
 const historyRecordRef = ref(null);
 // import { useUserStore } from "../store/userPessionCode.js";
-const { getQueryVariable, setActiveTabIndex } = useDataStore();
+const { getQueryVariable, setActiveTabIndex, getUserInfo } = useDataStore();
 const dataStore = useDataStore();
 const chatStore = useChatStore();
 // 变量
@@ -348,17 +354,6 @@ const showFeedback = () => {
   }
 };
 
-// 点击剩余次数会弹出的弹窗
-// 新增一个 ref 来控制弹窗的显示与隐藏
-const dialogVisible = ref(false);
-// 获取次数
-const showCount = () => {
-  console.log("显示剩余次数");
-  // 显示弹窗
-  // dialogVisible.value = true;
-  console.log("dialogVisible 的值:", dialogVisible.value); // 添加日志确认
-};
-
 // 保证发送消息时，滚动屏在底部
 
 const tabContentAIchat = ref(null);
@@ -375,9 +370,9 @@ const chartInteractionTimer = ref(null); // 图表交互检测定时器
 
 // 获取当前活动页面的滚动容器
 const getCurrentScrollContainer = () => {
-  if (activeTab.value === 'AIchat') {
+  if (activeTab.value === "AIchat") {
     return tabContentAIchat.value;
-  } else if (activeTab.value === 'AiEmotion') {
+  } else if (activeTab.value === "AiEmotion") {
     return tabContentAiEmotion.value;
   }
   return null;
@@ -420,21 +415,21 @@ const debouncedAiEmotionScrollToBottom = _.debounce(() => {
 const startAiEmotionHeightObserver = () => {
   // 先停止之前的监听器
   stopAiEmotionHeightObserver();
-  
+
   isAiEmotionAutoScrollEnabled.value = true;
-  
+
   // 创建ResizeObserver监听页面内容变化
   aiEmotionHeightObserver.value = new ResizeObserver((entries) => {
     if (isAiEmotionAutoScrollEnabled.value && activeTab.value === 'AiEmotion' && !isChartInteracting.value) {
       debouncedAiEmotionScrollToBottom();
     }
   });
-  
+
   // 监听document.body的尺寸变化
   if (document.body) {
     aiEmotionHeightObserver.value.observe(document.body);
   }
-  
+
   // 创建MutationObserver监听DOM结构变化
   const mutationObserver = new MutationObserver((mutations) => {
     let shouldScroll = false;
@@ -460,7 +455,7 @@ const startAiEmotionHeightObserver = () => {
       debouncedAiEmotionScrollToBottom();
     }
   });
-  
+
   // 监听AiEmotion页面的主要内容区域的DOM变化
   const aiEmotionContainer = tabContentAiEmotion.value;
   if (aiEmotionContainer) {
@@ -471,17 +466,19 @@ const startAiEmotionHeightObserver = () => {
       characterData: true,
     });
   }
-  
+
   // 保存mutationObserver引用以便清理
   aiEmotionHeightObserver.value.mutationObserver = mutationObserver;
-  
+
   // 为AiEmotion页面的滚动容器添加滚动事件监听器
   if (aiEmotionContainer) {
-    aiEmotionContainer.addEventListener('scroll', handleAiEmotionUserScroll, { passive: true });
+    aiEmotionContainer.addEventListener("scroll", handleAiEmotionUserScroll, {
+      passive: true,
+    });
     // 保存滚动事件监听器引用以便清理
     aiEmotionHeightObserver.value.scrollListener = handleAiEmotionUserScroll;
   }
-  
+
   console.log("AiEmotion页面高度监听器已启动");
 };
 
@@ -489,12 +486,12 @@ const startAiEmotionHeightObserver = () => {
 const handleAiEmotionUserScroll = () => {
   // 标记用户正在滚动
   isAiEmotionUserScrolling.value = true;
-  
+
   // 清除之前的定时器
   if (aiEmotionScrollTimer.value) {
     clearTimeout(aiEmotionScrollTimer.value);
   }
-  
+
   // 设置定时器，2秒后恢复自动滚动
   // aiEmotionScrollTimer.value = setTimeout(() => {
   //   isAiEmotionUserScrolling.value = false;
@@ -532,7 +529,7 @@ window.handleChartInteractionEnd = handleChartInteractionEnd;
 
 // 处理AiEmotion页面的滚动请求
 const handleAiEmotionScrollToBottom = () => {
-  if (activeTab.value === 'AiEmotion') {
+  if (activeTab.value === "AiEmotion") {
     const container = tabContentAiEmotion.value;
     if (container) {
       // 使用nextTick确保DOM已更新
@@ -548,32 +545,38 @@ const handleAiEmotionScrollToBottom = () => {
 const stopAiEmotionHeightObserver = () => {
   isAiEmotionAutoScrollEnabled.value = false;
   isAiEmotionUserScrolling.value = false;
-  
+
   // 清理滚动检测定时器
   if (aiEmotionScrollTimer.value) {
     clearTimeout(aiEmotionScrollTimer.value);
     aiEmotionScrollTimer.value = null;
   }
-  
+
   if (aiEmotionHeightObserver.value) {
     // 清理ResizeObserver
     aiEmotionHeightObserver.value.disconnect();
-    
+
     // 清理MutationObserver
     if (aiEmotionHeightObserver.value.mutationObserver) {
       aiEmotionHeightObserver.value.mutationObserver.disconnect();
       aiEmotionHeightObserver.value.mutationObserver = null;
     }
-    
+
     // 清理滚动事件监听器
-    if (aiEmotionHeightObserver.value.scrollListener && tabContentAiEmotion.value) {
-      tabContentAiEmotion.value.removeEventListener('scroll', aiEmotionHeightObserver.value.scrollListener);
+    if (
+      aiEmotionHeightObserver.value.scrollListener &&
+      tabContentAiEmotion.value
+    ) {
+      tabContentAiEmotion.value.removeEventListener(
+        "scroll",
+        aiEmotionHeightObserver.value.scrollListener
+      );
       aiEmotionHeightObserver.value.scrollListener = null;
     }
-    
+
     aiEmotionHeightObserver.value = null;
   }
-  
+
   console.log("AiEmotion页面高度监听器已停止");
 };
 
@@ -685,7 +688,7 @@ setTimeout(() => {
 const heightListener = () => {
   const tabContainer = getCurrentScrollContainer();
   if (!tabContainer) return;
-  
+
   let befortop = 0;
 
   const scrollHandler = () => {
@@ -837,7 +840,8 @@ const touchmoveHandler = (e) => {
     }
     // 判断触摸目标是否在当前活动页面的可滚动区域内
     const currentContainer = getCurrentScrollContainer();
-    const isScrollableArea = currentContainer && currentContainer.contains(e.target);
+    const isScrollableArea =
+      currentContainer && currentContainer.contains(e.target);
 
     // 如果不在可滚动区域，则阻止滚动
     if (!isScrollableArea) {
@@ -918,11 +922,14 @@ const backToHome = () => {
 
 // 8.18金币兑换Token start
 const userInfo = ref({
-  username: "HomilyLink",
-  jwcode: "90042088",
-  img: "	https://d31zlh4on95l9h.cloudfront.net/images/403ef762dd2f335df3b0c9e3fe488375.png",
+  nickname: "",
+  img: "",
+  jwcode: "",
+});
+const changeRule = ref({
+  gold: 1,
+  token: 1,
 });
-const changeRule = ref("1金币=1Token");
 const changeLevelList = ref([
   { position: 10, calculatedPosition: 10 },
   { position: 20, calculatedPosition: 20 },
@@ -935,12 +942,57 @@ const changeLevelList = ref([
 const activeLevel = ref(
   changeLevelList.value[0] || { position: 10, calculatedPosition: 10 }
 );
-const gold = ref(100);
-
+const gold = ref(90);
+// 点击剩余次数会弹出的弹窗
+// 新增一个 ref 来控制弹窗的显示与隐藏
+const dialogVisible = ref(false);
 const rechargeDialogVisible = ref(false);
 const confirmDialogVisible = ref(false);
 const changeSuccessDialogVisible = ref(false);
 
+// 图片加载错误处理
+const handleImageError = (event) => {
+  console.error("图片加载失败:", event.target.src);
+  // 可以设置默认图片或重试逻辑
+  event.target.src =
+    "https://cdn.legu168.com/jtzy/Product/pcjingwang/images/userimg.png";
+};
+
+// 获取次数
+const showCount = async () => {
+  try {
+    if (
+      !dataStore.userInfo.img ||
+      !dataStore.userInfo.nickname ||
+      !dataStore.userInfo.jwcode
+    ) {
+      console.log("缺少用户信息，调用方法");
+      await getUserInfo();
+    }
+
+    userInfo.value.nickname = dataStore.userInfo.nickname;
+    userInfo.value.img = dataStore.userInfo.img;
+    userInfo.value.jwcode = dataStore.userInfo.jwcode;
+    console.log("userInfo", userInfo.value);
+    const [res, res2] = await Promise.all([
+      showExchangeAPI(),
+      getGoldCoinAPI({
+        token: String(localStorage.getItem("localToken")),
+      }),
+    ]);
+    changeLevelList.value = res.data;
+    activeLevel.value = changeLevelList.value[0];
+    changeRule.value.token = res.data[0].ratio;
+    gold.value = res2.data.total;
+
+    // 显示弹窗
+    dialogVisible.value = true;
+    console.log("dialogVisible 的值:", dialogVisible.value); // 添加日志确认
+  } catch (e) {
+    console.error("获取兑换列表出错", e);
+  }
+};
+
 const chooseLevel = (item) => {
   activeLevel.value = item;
 };
@@ -955,8 +1007,23 @@ const changeToken = () => {
 };
 
 const goRecharge = () => {
+  sessionStorage.setItem("rechargeFlag", "1");
+
   if (isMobile.value) {
     console.log("用户是移动端");
+    // 调用原生方法跳转到首页
+    uni.postMessage({
+      data: {
+        val: {
+          name: "JWopenView",
+          extra: {
+            data: {
+              type: 4,
+            },
+          },
+        },
+      },
+    });
   } else {
     console.log("用户是pc端");
     const env = import.meta.env.VITE_ENV;
@@ -976,16 +1043,26 @@ const goRecharge = () => {
   }
 };
 
-const goChange = () => {
-  confirmDialogVisible.value = false;
-  dialogVisible.value = false;
-  changeSuccessDialogVisible.value = true;
-  setTimeout(() => {
-    changeSuccessDialogVisible.value = false;
-  }, 3000);
+const goChange = async () => {
+  try {
+    await exchangeAPI({
+      token: String(localStorage.getItem("localToken")),
+      num: activeLevel.value.position,
+    });
 
+    confirmDialogVisible.value = false;
+    dialogVisible.value = false;
+    changeSuccessDialogVisible.value = true;
+    setTimeout(() => {
+      changeSuccessDialogVisible.value = false;
+    }, 2000);
+
+    // 刷新次数
+    await chatStore.getUserCount();
+  } catch (e) {
+    console.error("兑换失败", e);
+  }
 };
-
 // 8.18金币兑换Token end
 
 onMounted(async () => {
@@ -1014,12 +1091,13 @@ onMounted(async () => {
   // 添加原生事件监听器
   window.addEventListener("resize", throttledJudgeDevice);
 
-  if (getQueryVariable("successType") == "success") {
-    dialogVisible.value = true;
-    window.parent.location.href = window.parent.location.href.replace(
-      "successType=success",
-      ""
-    );
+  if (
+    sessionStorage.getItem("rechargeFlag") == "1" &&
+    getQueryVariable("successType") == "success"
+  ) {
+    await godExchangeAPI({ state: 1 });
+    showCount();
+    sessionStorage.setItem("rechargeFlag", "0");
   }
 });
 
@@ -1142,7 +1220,6 @@ onUnmounted(() => {
                     <div class="pc-count-number">{{ UserCount }}</div>
                   </div>
                   <div class="pc-clickGetCount">点击获取Token</div>
-
                 </div>
                 <div class="pc-backToHomeBtn" @click="backToHome()">
                   <img
@@ -1174,7 +1251,7 @@ onUnmounted(() => {
               @enableInput="enableInput"
             />
           </div>
-          
+
           <!-- AiEmotion页面的独立滚动容器 -->
           <div
             v-show="activeTab === 'AiEmotion'"
@@ -1330,19 +1407,26 @@ onUnmounted(() => {
     </el-container>
     <!-- 弹窗 -->
     <!-- 新增弹窗组件 -->
-    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '60%'">
+    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '48%'">
       <!-- 中间内容部分 -->
       <div class="changeMsg">
         <div class="changeInfo">
           <div class="changeImg">
-            <img :src="userInfo.img" alt="头像" class="changeImgClass" />
+            <img
+              :src="userInfo.img"
+              alt="头像"
+              class="changeImgClass"
+              @error="handleImageError"
+            />
           </div>
           <div class="changeContent">
-            <div class="changeUsername">{{ userInfo.username }}</div>
+            <div class="changeUsername">{{ userInfo.nickname }}</div>
             <div class="changeJwcode">精网号：{{ userInfo.jwcode }}</div>
           </div>
         </div>
-        <div class="changeRule">兑换规则：{{ changeRule }}</div>
+        <div class="changeRule">
+          兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token
+        </div>
       </div>
       <div class="changeLevel">
         <div class="changeLevelTitle">兑换Token</div>
@@ -1381,7 +1465,7 @@ onUnmounted(() => {
 
     <el-dialog
       v-model="rechargeDialogVisible"
-      :width="isMobile ? '60%' : '40%'"
+      :width="isMobile ? '60%' : '30%'"
       :show-close="false"
     >
       <div class="rechargeDialogTitle">温馨提示</div>
@@ -1402,7 +1486,7 @@ onUnmounted(() => {
 
     <el-dialog
       v-model="confirmDialogVisible"
-      :width="isMobile ? '60%' : '40%'"
+      :width="isMobile ? '60%' : '30%'"
       :show-close="false"
     >
       <div class="confirmDialogTitle">兑换</div>
@@ -1421,13 +1505,13 @@ onUnmounted(() => {
 
     <el-dialog
       v-model="changeSuccessDialogVisible"
-      :width="isMobile ? '60%' : '40%'"
+      :width="isMobile ? '60%' : '30%'"
       :show-close="false"
       class="changeSuccessDialog"
     >
       <div class="changeSuccessDialogTitle">兑换成功</div>
       <div class="changeSuccessDialogContent">
-        尊敬的用户，恭喜您成功兑换：{{ activeLevel.calculatedPosition }}Token
+        尊敬的用户，恭喜您成功兑换：{{ activeLevel.calculatedPosition }} Token
       </div>
     </el-dialog>
   </div>
@@ -1691,6 +1775,11 @@ body {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+}
+
+.backToHomeBtn:hover {
+  transform: scale(1.05);
 }
 
 .backImg {
@@ -1718,6 +1807,7 @@ body {
   width: 65%;
   height: 100%;
   position: relative;
+  cursor: pointer;
 }
 
 .pc-countBtn:hover {
@@ -1756,6 +1846,7 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  cursor: pointer;
 }
 .pc-backImg {
   width: auto;
@@ -1987,22 +2078,6 @@ body {
   z-index: 6;
 }
 
-@media (max-width: 768px) {
-  .action-btn {
-    height: 21px;
-  }
-
-  .footer-second-line {
-    padding: 5px 10px 10px;
-  }
-
-  .msg-input {
-    /* min-height: 44px; */
-    /* height: 44px; */
-    font-size: 16px;
-  }
-}
-
 .changeMsg {
   display: flex;
   width: 100%;
@@ -2029,6 +2104,8 @@ body {
 }
 
 .changeImgClass {
+  width: 50px;
+  height: auto;
 }
 
 .changeContent {
@@ -2072,6 +2149,8 @@ body {
   display: flex;
   background-color: #f8f8f8;
   width: 20%;
+  min-width: 70px;
+  max-width: 150px;
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -2122,6 +2201,7 @@ body {
 
 .changeBtn {
   width: 40%;
+  max-width: 350px;
   background-color: #4e86fe;
   color: white;
   display: flex;
@@ -2163,8 +2243,9 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
+  white-space: nowrap;
 }
 
 .recharge:hover {
@@ -2176,7 +2257,7 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
 }
 
@@ -2211,7 +2292,7 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
 }
 
@@ -2224,7 +2305,7 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
 }
 
@@ -2248,6 +2329,86 @@ body {
   font-weight: bold;
   text-align: center;
 }
+
+@media (max-width: 768px) {
+  .action-btn {
+    height: 21px;
+  }
+
+  .footer-second-line {
+    padding: 5px 10px 10px;
+  }
+
+  .msg-input {
+    /* min-height: 44px; */
+    /* height: 44px; */
+    font-size: 16px;
+  }
+
+  /* .changeImg {
+    width: 30px;
+    height: 30px;
+  } */
+
+  .changeImgClass {
+    width: 30px;
+    height: 30px;
+  }
+
+  .changeContent {
+    font-size: 0.5rem;
+  }
+
+  .changeLevelItems {
+    font-size: 0.5rem;
+  }
+
+  .rechargeDialogTitle {
+    font-size: 1.3rem;
+  }
+  .rechargeDialogContent {
+    font-size: 1rem;
+  }
+
+  .rechargeDialogBtnGroup {
+    font-size: 1rem;
+  }
+
+  .recharge {
+    padding: 5px 10px;
+  }
+
+  .rechargeDialogCancel {
+    padding: 5px 10px;
+  }
+
+  .confirmDialogTitle {
+    font-size: 1.3rem;
+  }
+  .confirmDialogContent {
+    font-size: 1rem;
+  }
+
+  .confirmDialogBtnGroup {
+    font-size: 1rem;
+  }
+
+  .confirmDialogConfirm {
+    padding: 5px 10px;
+  }
+
+  .confirmDialogCancel {
+    padding: 5px 10px;
+  }
+
+  .changeSuccessDialogTitle {
+    font-size: 1.3rem;
+  }
+
+  .changeSuccessDialogContent {
+    font-size: 1rem;
+  }
+}
 </style>
 
 <style>