init

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.config.ts

@@ -0,0 +1,32 @@
+export default defineAppConfig({
+    ui: {
+        header: {
+            slots: {
+                root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
+                container: 'flex items-center justify-between gap-3 h-full',
+                left: 'lg:flex-1 flex items-center gap-1.5',
+                center: 'hidden lg:flex',
+                right: 'flex items-center justify-end lg:flex-1 gap-1.5',
+                title: 'shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5',
+                toggle: 'lg:hidden',
+                content: 'lg:hidden',
+                overlay: 'lg:hidden',
+                header: 'px-4 sm:px-6 h-(--ui-header-height) shrink-0 flex items-center justify-between gap-3',
+                body: 'p-4 sm:p-6 overflow-y-auto'
+            },
+            variants: {
+                toggleSide: {
+                    left: {
+                        toggle: '-ms-1.5'
+                    },
+                    right: {
+                        toggle: '-me-1.5'
+                    }
+                }
+            }
+        },
+        colors: {
+            primary: 'blue',
+        }
+    }
+})

app/app.vue

@@ -0,0 +1,27 @@
+<template>
+  <UApp>
+    <NuxtLayout>
+      <Upagae>
+
+        <UPageSection
+        :ui="{container:'py-9 lg:px-0' }">
+
+          <img src="/img/banner.png" alt="" class="w-full">
+          <img src="/img/1.jpg" alt="" class="w-full">
+          <img src="/img/2.jpg" alt="" class="w-full">
+          <img src="/img/3.jpg" alt="" class="w-full">
+          <img src="/img/4.jpg" alt="" class="w-full">
+          <img src="/img/5.jpg" alt="" class="w-full">
+          <img src="/img/6.jpg" alt="" class="w-full">
+          <img src="/img/7.jpg" alt="" class="w-full">
+          <img src="/img/8.jpg" alt="" class="w-full">
+          <img src="/img/9.jpg" alt="" class="w-full">
+
+        </UPageSection>
+          
+      </Upagae>
+    </NuxtLayout>
+  </UApp>
+</template>
+<script setup lang="ts">
+</script>

app/assets/css/main.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+
+
+
+/*:root {*/
+/*    --ui-container: var(--container-4xl);*/
+
+/*    !*::selection {*!*/
+/*    !*    color: #282a30;*!*/
+/*    !*    background-color: #c8c8c8;*!*/
+/*    !*}*!*/
+/*}*/
+/*:root {*/
+/*    --ui-header-height: --spacing(24);*/
+/*}*/

app/components/AppFooter.vue

@@ -0,0 +1,80 @@
+<script lang="ts" setup>
+
+
+const contacts = [
+  {
+    label: '电话',
+    value: '15280659990',
+    icon: 'i-heroicons-phone',
+
+  },
+  {
+    label: '邮箱',
+    value: '564737095@qq.com',
+    icon: 'i-heroicons-envelope',
+
+  },
+  {
+    label: '地址',
+    value: '福建省福鼎市太姥山镇海埕路13号',
+    icon: 'i-heroicons-map-pin',
+
+  }
+]
+</script>
+
+<template>
+  <div
+      :style="{ backgroundImage: `url('/img/index/footer_bg.png')` ,    }"
+      class="bg-cover bg-no-repeat bg-center w-full ">
+    <UFooter>
+      <template #left>
+        <p class="text-bold text-sm">Copyright © 闽ICP备2023022186号-2</p>
+      </template>
+
+      <div class="grid grid-cols-1 md:flex gap-4">
+        <div
+            v-for="(item, index) in contacts"
+            :key="index"
+
+            class="flex items-center  rounded-xl transition-all hover:scale-[1.02]  md:flex-row"
+        >
+          <UIcon :name="item.icon" class="w-6 h-6  text-current"/>
+
+          <div class="font-medium">{{ item.label }}:</div>
+          <div class="mt-1 text-sm">{{ item.value }}</div>
+
+        </div>
+      </div>
+
+
+      <template #right>
+        <!--        <UButton-->
+        <!--            aria-label="Discord"-->
+        <!--            color="neutral"-->
+        <!--            icon="i-simple-icons-discord"-->
+        <!--            target="_blank"-->
+        <!--            to="https://go.nuxt.com/discord"-->
+        <!--            variant="ghost"-->
+        <!--        />-->
+        <UButton
+
+            color="neutral"
+            icon="simple-icons-alibabadotcom"
+            target="_blank"
+            to="https://chuangtewulian.1688.com/page/index.html"
+
+        />
+        <UButton
+
+            color="neutral"
+            icon="i-simple-icons-tiktok"
+            target="_blank"
+            to="https://www.douyin.com/user/MS4wLjABAAAAdPkGyADnJFLrZBwDM9U7faUJs-wmmyEU9L34SS0CKhs"
+
+        />
+      </template>
+    </UFooter>
+  </div>
+
+</template>

app/components/AppHeader.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+
+const isScrolled = ref(false)
+const headerUI = ref({
+  root: 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16'
+})
+
+const handleScroll = () => {
+  isScrolled.value = window.scrollY > 10
+  headerUI.value.root = isScrolled.value
+      ? 'fixed top-0 left-0 right-0 z-50 bg-green-700 h-8 lg:h-16' // 不透明
+      : 'fixed top-0 left-0 right-0 z-50 bg-green-600/25 backdrop-filter-none h-8 lg:h-16' // 半透明
+}
+
+onMounted(() => window.addEventListener('scroll', handleScroll))
+onUnmounted(() => window.removeEventListener('scroll', handleScroll))
+
+
+
+
+</script>
+
+<template>
+  <UHeader
+      :ui="{root:'fixed right-0 left-0 h-8 lg:h-16'}"
+
+
+  >
+    <!-- 标题部分 -->
+    <template #title>
+      <view class="h-6 w-auto text-primary">
+        小鹿骑行
+      </view>
+    </template>
+
+    <!-- 右侧区域 -->
+    <template #right/>
+
+
+  </UHeader>
+</template>
+//:ui="headerUI"
+//:ui="{link: 'text-white text-lg font-bold '}"
+
+

app/components/ContactFloatingButton.vue

@@ -0,0 +1,22 @@
+<!-- components/ContactFloatingButton.vue -->
+<template>
+  <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 flex items-center">
+    <UPopover mode="hover">
+      <UButton
+
+          class="bg-green-500 hover:bg-green-600 text-white px-4 py-3 rounded-l-lg shadow-lg transition-all duration-300"
+          color="neutral" label="联系客服"
+          variant="subtle"/>
+      <template #content>
+        <div class="w-64 overflow-hidden transition-all duration-300 ease-out;">
+          <img
+              alt="QRCode"
+              class="w-full h-auto border-4 border-white rounded-lg shadow-xl"
+              src="/img/QRCode.png"
+          >
+        </div>
+      </template>
+    </UPopover>
+  </div>
+</template>
+

app/components/TitleSection.vue

@@ -0,0 +1,25 @@
+<!-- components/TitleSection.vue -->
+<template>
+  <view class="flex flex-col items-center">
+    <view class="text-sm mt-4 lg:mt-20 text-primary font-bold">
+      {{ subtitle }}
+    </view>
+    <view class="text-4xl my-6 font-bold">
+      {{ title }}
+    </view>
+
+  </view>
+</template>
+
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: '默认标题'
+  },
+  subtitle: {
+    type: String,
+    default: '默认副标题'
+  }
+})
+</script>

app/layouts/default.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <AppHeader/>
+    <slot/>
+    <AppFooter/>
+    <ContactFloatingButton/>
+  </div>
+</template>
+
+<script setup>
+// 自動導入 AppHeader 組件
+</script>

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

nuxt.config.ts

@@ -0,0 +1,13 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  modules: ['@nuxt/eslint', '@nuxt/ui', '@nuxt/image'],
+  css: ['~/assets/css/main.css'],
+  fonts: {
+    providers: {
+      google: false, // 禁用 Google Fonts
+      googleicons: false // 禁用 Google Icons
+    }
+  },
+})

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bike",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "1.9.0",
+    "@nuxt/image": "1.11.0",
+    "@nuxt/ui": "4.1.0",
+    "@tailwindcss/postcss": "^4.1.16",
+    "eslint": "^9.38.0",
+    "nuxt": "^4.2.0",
+    "tailwindcss": "^4.1.16",
+    "typescript": "^5.9.3",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}