nuxt初始化

2026-04-20 09:45:20 +08:00
parent e90903a378
commit d3eb1d3424
508 changed files with 35562 additions and 0 deletions
--- a/nuxt-web/components/KefuWidget.vue
+++ b/nuxt-web/components/KefuWidget.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { siteInfo } from '~/data/site'
+</script>
+
+<template>
+  <aside class="kefu-widget" aria-label="客服联系方式">
+    <a class="widget-item" :href="`tel:${siteInfo.phone}`" aria-label="拨打电话">
+      <strong>电话咨询</strong>
+      <span>{{ siteInfo.phone }}</span>
+    </a>
+    <a
+      class="widget-item"
+      :href="`http://wpa.qq.com/msgrd?v=3&uin=${siteInfo.qq}&site=qq&menu=yes`"
+      target="_blank"
+      rel="noreferrer"
+      aria-label="打开QQ咨询"
+    >
+      <strong>QQ 咨询</strong>
+      <span>{{ siteInfo.qq }}</span>
+    </a>
+    <div class="widget-item qr-item">
+      <strong>微信公众号</strong>
+      <img :src="siteInfo.wechatOfficialImage" alt="微信公众号二维码">
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.kefu-widget {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 120;
+  display: grid;
+  gap: 12px;
+}
+
+.widget-item {
+  min-width: 148px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: rgba(16, 37, 65, 0.96);
+  color: #fff;
+  text-decoration: none;
+  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
+}
+
+.widget-item strong,
+.widget-item span {
+  display: block;
+  color: inherit;
+}
+
+.qr-item img {
+  width: 96px;
+  margin-top: 8px;
+  border-radius: 10px;
+  background: #fff;
+}
+
+@media (max-width: 767px) {
+  .kefu-widget {
+    right: 10px;
+    bottom: 10px;
+  }
+
+  .widget-item {
+    min-width: 112px;
+    padding: 10px;
+  }
+
+  .qr-item img {
+    width: 72px;
+  }
+}
+</style>