feat: 新增ios下载

app/components/AppDownloadPopup.vue

@@ -6,6 +6,14 @@ const closePopup = () => {
   const store = useStore()
   visibleAppDownloadPopup.value = false
 }
+
+// iOS App Store 下载链接
+const IOS_DOWNLOAD_URL =
+  'https://apps.apple.com/app/%E6%B8%85%E6%8E%A7%E7%B4%AB%E8%8D%86%E6%95%B0%E6%99%BA%E5%AD%A6%E5%A0%82/id6476735372'
+// Android APK 下载链接（与二维码一致）
+const ANDROID_DOWNLOAD_URL = 'https://webapp-pub.ezijing.com/book-app/download/ebook.apk'
+// 当前选中的下载平台（默认 iOS，悬停切换并保持选中）
+const hoveredBtn = ref('')
 </script>
 
 <template>
@@ -17,13 +25,35 @@ const closePopup = () => {
       </div>
       <div class="app-download-content">
         <h2>探索数智世界<br />从<span>数智学堂</span>开始!</h2>
-        <dl>
-          <dt><img src="https://webapp-pub.ezijing.com/www/pc/next/qrcode_app.png" alt="二维码" /></dt>
-          <dd>
-            <h3>扫码下载APP</h3>
-            <p>目前仅支持安卓系统安装，其他版本敬请期待</p>
-          </dd>
-        </dl>
+        <div class="app-download-entry">
+          <div class="app-download-qr">
+            <img
+              v-if="hoveredBtn !== 'android'"
+              src="https://webapp-pub.ezijing.com/www/pc/next/qrcode_ios.png"
+              alt="iOS下载二维码" />
+            <img v-else src="https://webapp-pub.ezijing.com/www/pc/next/qrcode_app.png?v=1" alt="Android下载二维码" />
+          </div>
+          <div class="app-download-btns">
+            <a
+              class="app-download-btn"
+              :class="{ 'is-active': hoveredBtn !== 'android' }"
+              @mouseenter="hoveredBtn = 'ios'"
+              :href="IOS_DOWNLOAD_URL"
+              target="_blank"
+              rel="noopener">
+              <IconsIconApple :size="16" color="var(--btn-icon-color)" />iOS 下载
+            </a>
+            <a
+              class="app-download-btn"
+              :class="{ 'is-active': hoveredBtn === 'android' }"
+              @mouseenter="hoveredBtn = 'android'"
+              :href="ANDROID_DOWNLOAD_URL"
+              target="_blank"
+              rel="noopener">
+              <IconsIconAndroid :size="16" color="var(--btn-icon-color)" />Android 下载
+            </a>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -77,30 +107,60 @@ const closePopup = () => {
         color: var(--main-color);
       }
     }
-    dl {
+    .app-download-entry {
       margin-top: 40px;
       display: flex;
-      justify-content: center;
       align-items: center;
-      dt {
-        width: 114px;
-        height: 114px;
+
+      .app-download-qr {
+        width: 140px;
+        height: 140px;
+        flex-shrink: 0;
+
         img {
           width: 100%;
           height: 100%;
         }
       }
-      dd {
-        h3 {
-          font-size: 16px;
-          font-weight: 400;
-          color: #333333;
-        }
-        p {
-          margin-top: 10px;
-          font-size: 12px;
-          color: #6c6c6c;
-        }
+
+      .app-download-btns {
+        margin-left: 32px;
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+    }
+
+    .app-download-btn {
+      box-sizing: border-box;
+      width: 160px;
+      height: 32px;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 600;
+      text-decoration: none;
+      background-color: #ffffff;
+      border: 1px solid #c7c7c7;
+      color: #333333;
+      --btn-icon-color: #666666;
+      transition:
+        background-color 0.2s,
+        border-color 0.2s,
+        color 0.2s;
+
+      svg {
+        flex-shrink: 0;
+        margin-right: 6px;
+      }
+
+      &.is-active {
+        background-color: var(--main-color);
+        border-color: var(--main-color);
+        color: #ffffff;
+        --btn-icon-color: #ffffff;
       }
     }
   }

app/components/icons/IconAndroid.vue

+<script setup lang="ts">
+const props = defineProps({
+  size: { type: [Number, String], default: 24 },
+  color: { type: String, default: '#666666' },
+})
+</script>
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" role="img" :fill="color">
+    <path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993.0001.5511-.4482.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4483.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5676.1521l-2.0223 3.503C15.5902 8.2439 13.8533 7.8508 12 7.8508s-3.5902.3931-5.1367 1.0989L4.841 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3435-4.1021-2.6892-7.5743-6.1185-9.4396" />
+  </svg>
+</template>

app/components/icons/IconApple.vue

+<script setup lang="ts">
+const props = defineProps({
+  size: { type: [Number, String], default: 24 },
+  color: { type: String, default: '#ffffff' },
+})
+</script>
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" role="img" :fill="color">
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701z" />
+  </svg>
+</template>