首次

src/App.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div class="app-container">
+    <router-view>
+    </router-view>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  width: 100%;
+  min-height: 100vh;
+}
+</style>

src/assets/scss/constant.scss

@@ -0,0 +1,5 @@
+$color-primary: #165dff;
+$color-success: #00b42a;
+$color-warning: #fa981d;
+$color-danger: #ff4d4f;
+$color-default: #8c8c8c;

src/assets/scss/extend.scss

@@ -0,0 +1,3 @@
+.primary-btn {
+  background-color: $color-primary;
+}

src/assets/scss/mixins.scss

@@ -0,0 +1,3 @@
+@mixin no-border() {
+  border: none;
+}

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/CommonHeader.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="common-header">
+        <van-nav-bar :title="title" left-arrow @click-left="handleBack" :border="false" :fixed="true" :safe-area-inset-top="true" />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+    name: 'CommonHeader',
+    props: {
+        title: {
+            type: String,
+            default: ''
+        },
+        customBack: {
+            type: Function,
+            default: null
+        }
+    },
+    setup(props) {
+        const router = useRouter()
+
+        const handleBack = () => {
+            if (props.customBack) {
+                props.customBack()
+            } else {
+                router.back()
+            }
+        }
+
+        return {
+            handleBack
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+} 

src/main.ts

@@ -0,0 +1,19 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import Vant from 'vant'
+import 'vant/lib/index.css'
+import store from './store'
+import { useREM } from './utils/rem'
+
+// 初始化rem
+useREM()
+
+const app = createApp(App)
+
+app.use(router)
+app.use(Vant)
+app.use(store)
+
+
+app.mount('#app')

src/router/index.ts

@@ -0,0 +1,23 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+ 
+const routes = [
+  { 
+    path: '/', 
+    redirect: '/home' 
+  },
+  { 
+    path: '/home', 
+    name: 'home',
+    component: () => import('../views/home/index.vue'),
+    meta: {
+      keepAlive: true
+    }
+  }
+]
+ 
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+ 
+export default router

src/store/index.ts

@@ -0,0 +1,10 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+
+export default store
+
+// 统一导出 useStore 方法
+// export * from './user' 

src/style.css

@@ -0,0 +1,79 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/types/global.d.ts

@@ -0,0 +1,25 @@
+import type { ToastOptions } from 'vant'
+
+declare global {
+  interface Window {
+    $toast: {
+      success(message: string, options?: ToastOptions): void
+      error(message: string, options?: ToastOptions): void
+      warning(message: string, options?: ToastOptions): void
+      info(message: string, options?: ToastOptions): void
+      loading(message?: string, options?: ToastOptions): void
+    }
+  }
+}
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    $toast: {
+      success(message: string, options?: ToastOptions): void
+      error(message: string, options?: ToastOptions): void
+      warning(message: string, options?: ToastOptions): void
+      info(message: string, options?: ToastOptions): void
+      loading(message?: string, options?: ToastOptions): void
+    }
+  }
+} 

src/utils/rem.ts

@@ -0,0 +1,13 @@
+// rem 适配
+export const useREM = () => {
+  const baseSize = 75 // 基准大小，注意这里改为75
+  function setRem() {
+    const scale = document.documentElement.clientWidth / 750 // 设计稿宽度改为750
+    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
+  }
+
+  setRem() // 初始化
+  window.onresize = () => {
+    setRem()
+  }
+} 

src/views/home/index.vue

@@ -0,0 +1,344 @@
+<template>
+  <div class="weather-app">
+    <div class="weather-header">
+      <i class="fas fa-cloud-sun"></i>
+      <span class="weather-title">锋天气</span>
+    </div>
+    
+    <div class="weather-grid">
+      <div v-for="city in cities" :key="city.prefix" class="weather-container">
+        <div class="weather-info">
+          <div class="primary-info">
+            <div class="weather-icon">
+              <i :class="getWeatherIcon(city.weatherData.condition)"></i>
+            </div>
+            <div class="temp-location">
+              <div class="temperature">{{ city.weatherData.temperature }}°</div>
+              <div class="location-group">
+                <div class="location">{{ city.weatherData.location }}</div>
+                <div class="condition">{{ city.weatherData.condition }}</div>
+              </div>
+            </div>
+          </div>
+          <div class="secondary-info">
+            <div class="info-item">
+              <i class="fas fa-map-marker-alt"></i>
+              <span>{{ city.weatherData.country }}</span>
+            </div>
+            <div class="info-item">
+              <i class="fas fa-clock"></i>
+              <span>更新于 {{ city.weatherData.lastUpdate }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import axios from 'axios'
+
+const CACHE_DURATION = 15 * 60 * 1000 // 15 minutes in milliseconds
+
+const cities = ref([
+  {
+    prefix: 'ningbo',
+    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTQ3VZQP879N&language=zh-Hans&unit=c',
+    weatherData: {}
+  },
+  {
+    prefix: 'shenzhen',
+    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WS10730EM8EV&language=zh-Hans&unit=c',
+    weatherData: {}
+  },
+  {
+    prefix: 'shaoxing',
+    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTMDXTK6STK4&language=zh-Hans&unit=c',
+    weatherData: {}
+  },
+  {
+    prefix: 'hangzhou',
+    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTMKQ069CCJ7&language=zh-Hans&unit=c',
+    weatherData: {}
+  },
+ 
+  {
+    prefix: 'jinhua',
+    url: 'https://api.seniverse.com/v3/weather/now.json?key=SMaPuMVF4IicVWOpa&location=WTJJ6TY7R0FK&language=zh-Hans&unit=c',
+    weatherData: {}
+  }
+
+])
+
+const fetchWeather = async (city) => {
+  try {
+    const response = await axios.get(city.url)
+    const weather = response.data.results[0]
+    const weatherData = {
+      location: weather.location.name,
+      country: weather.location.country,
+      condition: weather.now.text,
+      temperature: weather.now.temperature,
+      lastUpdate: new Date(weather.last_update).toLocaleString(),
+      timestamp: Date.now()
+    }
+    localStorage.setItem(city.prefix, JSON.stringify(weatherData))
+    city.weatherData = weatherData
+  } catch (error) {
+    console.error(`Error fetching ${city.prefix} weather data:`, error)
+  }
+}
+
+const fetchWeatherWithDelay = () => {
+  cities.value.forEach((city, index) => {
+    const cachedData = localStorage.getItem(city.prefix)
+    if (cachedData) {
+      const weatherData = JSON.parse(cachedData)
+      if (Date.now() - weatherData.timestamp < CACHE_DURATION) {
+        city.weatherData = weatherData
+        return
+      }
+    }
+    setTimeout(() => {
+      fetchWeather(city)
+    }, index * 1000)
+  })
+}
+
+const getWeatherIcon = (condition) => {
+  const iconMap = {
+    '晴': 'fas fa-sun',
+    '多云': 'fas fa-cloud-sun',
+    '阴': 'fas fa-cloud',
+    '雨': 'fas fa-cloud-rain',
+    '雪': 'fas fa-snowflake',
+    '雷': 'fas fa-bolt',
+    // 可以根据需要添加更多天气状况映射
+  }
+  return iconMap[condition] || 'fas fa-cloud'
+}
+
+onMounted(() => {
+  fetchWeatherWithDelay()
+})
+</script>
+
+<style scoped>
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+
+.weather-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 30px;
+  padding-top: 20px;
+}
+
+.weather-header i {
+  font-size: 2rem;
+  color: #2c3e50;
+}
+
+.weather-title {
+  font-size: 2.2rem;
+  font-weight: 600;
+  color: #2c3e50;
+  letter-spacing: 2px;
+}
+
+.weather-grid {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 20px;
+  padding: 16px;
+}
+
+.weather-container {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 24px;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  min-width: 0;
+}
+
+.weather-container:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
+}
+
+.primary-info {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin-bottom: 16px;
+  padding-left: 60px;
+}
+
+.weather-icon {
+  font-size: 2.5rem;
+  color: #4a90e2;
+  min-width: 60px;
+  width: 60px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.temp-location {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: 60px;
+}
+
+.temperature {
+  font-size: 2rem;
+  font-weight: 400;
+  color: #2c3e50;
+  line-height: 1.2;
+  margin-bottom: 8px;
+}
+
+.location-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.location {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: #2c3e50;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+}
+
+.condition {
+  font-size: 0.9rem;
+  color: #5d7290;
+  line-height: 1.2;
+}
+
+.secondary-info {
+  padding-top: 16px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: #7f8c8d;
+  font-size: 0.85rem;
+  line-height: 1.2;
+}
+
+.info-item > span {
+  font-size: 20px;
+}
+
+.info-item i {
+  min-width: 16px;
+  text-align: center;
+  color: #95a5a6;
+}
+
+@media (max-width: 992px) {
+  .weather-grid {
+    max-width: 900px;
+    padding: 12px;
+    gap: 16px;
+  }
+
+  .weather-container {
+    padding: 20px;
+  }
+
+  .weather-icon {
+    min-width: 50px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .primary-info {
+    gap: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .weather-grid {
+    grid-template-columns: 1fr;
+    max-width: 600px;
+  }
+
+  .weather-container {
+    padding: 16px;
+  }
+
+  .weather-icon {
+    min-width: 45px;
+    width: 45px;
+    height: 45px;
+    font-size: 2rem;
+  }
+
+  .temperature {
+    font-size: 1.6rem;
+    margin-bottom: 6px;
+  }
+
+  .location {
+    font-size: 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .weather-grid {
+    padding: 10px;
+    gap: 12px;
+  }
+
+  .weather-container {
+    padding: 14px;
+  }
+
+  .primary-info {
+    gap: 12px;
+  }
+
+  .weather-icon {
+    min-width: 40px;
+    width: 40px;
+    height: 40px;
+    font-size: 1.8rem;
+  }
+
+  .temperature {
+    font-size: 1.4rem;
+    margin-bottom: 4px;
+  }
+
+  .location {
+    font-size: 0.95rem;
+  }
+
+  .condition {
+    font-size: 0.85rem;
+  }
+}
+</style>

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />