diff --git a/README.md b/README.md index 2cb2a8034c0d032a113efc6e0e720dfbf78704fd..0186ead93f3a8eb49b41fed0d53c69ed92118d13 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,65 @@ -# VueJS-with-Vite - -Vue.js 是基于 JavaScript 构建用户界面的库。该模板使用 Vite 来提供应用程序服务。 - -## 推荐的IDE设置 - -[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). - -## 自定义配置 - -请参阅 [[Vite配置参考](https://vitejs.dev/config/). - -## 项目设置 - -```sh -npm install -``` - -### 在开发环境中启动和热更新 - -```sh -npm run dev -``` - -### 编译用于生产环境 - -```sh -npm run build -``` +# 智慧养老平台（Vue3 + Vite） + +## 项目简介 +本项目是基于 Vue3 + Vite + Element Plus 的"智慧养老"主题平台，涵盖登录注册、新闻资讯、商品展示、社区互动、服务预约等多模块，界面美观、交互丰富，适合课程设计、项目考核和实际展示。 + +## 主要功能 +- **首页**：轮播图、健康打卡、欢迎文案 +- **商品页**：商品卡片、父子组件、插槽、智能设备推荐 +- **新闻页**：新闻列表、详情页、配图/视频、评论区、相关文章推荐 +- **社区页**：社区活动、家属留言 +- **登录/注册**：正则验证、记住我、验证码、第三方登录、自适应美化 +- **服务预约**：表单填写、预约历史 +- **紧急呼叫**：右下角悬浮按钮 + +## 技术栈 +- Vue3 + Vite +- vue-router +- Element Plus +- 本地存储（localStorage）数据持久化 +- 响应式布局与页面美化 + +## 目录结构 +``` +├── public/assets # 图片、视频等素材 +├── src/ +│ ├── components/ # 公共组件 +│ ├── views/ # 页面视图 +│ ├── router/ # 路由配置 +│ └── main.js # 入口文件 +├── package.json +├── README.md +└── ... +``` + +## 运行方法 +1. 安装依赖 + ```bash + npm install + # 或 yarn install + ``` +2. 启动开发环境 + ```bash + npm run dev + # 或 yarn dev + ``` +3. 打开浏览器访问 [http://localhost:5173](http://localhost:5173) + +## 主要特色与考核点 +- 结构规范，代码分层清晰 +- 路由、父子组件、插槽、正则验证等 Vue3 核心考点 +- 页面美观，主色调统一，动画丰富，响应式适配 +- 本地存储实现健康打卡、评论、预约、留言等数据持久化 +- 健壮性处理，异常友好提示 +- 素材管理与路径规范 + +## 扩展建议 +- 可接入后端API实现数据同步 +- 增加更多智能设备、健康服务、社区互动功能 +- 优化移动端体验 + +## 截图与演示 +（请自行补充项目截图、演示视频等） + +--- +如有问题欢迎交流！ \ No newline at end of file diff --git a/README.txt b/README.txt new file mode 100644 index 0000000000000000000000000000000000000000..2e29fc9e21d6e46b542097e8abaa56e45b66914e --- /dev/null +++ b/README.txt @@ -0,0 +1,14 @@ +项目名称：智慧养老网站 + +运行方式： +1. 安装依赖：npm install +2. 启动项目：npm run dev +3. 打包项目：npm run build + +评分点说明： +- 父子组件与插槽：Products.vue 和 ProductCard.vue +- 路由跳转：VueRouter 配置，所有页面可跳转 +- 正则验证：Login.vue/Register.vue +- 页面布局与样式：App.vue 使用 element-plus +- 至少5个功能模块：登录、注册、简介、商品展示、新闻、社区 +- 图片素材：放在 public/assets 目录 \ No newline at end of file diff --git a/index.html b/index.html index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..5ddedaf0651a65eb8b495e878eac1c6943cad727 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,12 @@ - - - - - - - Vite App - - -
- - - + + + + + + 智慧养老平台 + + +
+ + + \ No newline at end of file diff --git a/package.json b/package.json index b285a5c617647f609cc8ad3fb475f3b9b3393a21..b8c9d9c81a9b53f37d2cb7e26a1ef63d1af41944 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,18 @@ -{ - "name": "vuejs-with-vite", - "version": "0.0.1", - "scripts": { - "dev": "vite --host", - "build": "vite build", - "preview": "vite preview --port 4173" - }, - "dependencies": { - "guess": "^1.0.2", - "vue": "^3.2.37" - }, - "devDependencies": { - "@vitejs/plugin-vue": "^3.0.1", - "vite": "^5.0.1" - } -} +{ + "name": "smart-elderly-care", + "version": "1.0.0", + "scripts": { + "dev": "vite", + "build": "vite build", + "serve": "vite preview" + }, + "dependencies": { + "element-plus": "^2.3.0", + "vue": "^3.4.0", + "vue-router": "^4.2.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^5.2.4", + "vite": "^5.0.0" + } +} diff --git a/public/.keep b/public/.keep new file mode 100644 index 0000000000000000000000000000000000000000..077612b2f3ecc4c1584a9007871812f43d6948e5 --- /dev/null +++ b/public/.keep @@ -0,0 +1 @@ +# 保持public目录存在 \ No newline at end of file diff --git a/public/assets/.keep b/public/assets/.keep new file mode 100644 index 0000000000000000000000000000000000000000..ac314788d2c73b8b56719e2ee3843b5e6b7f2a6f --- /dev/null +++ b/public/assets/.keep @@ -0,0 +1 @@ +# 保持assets目录存在 \ No newline at end of file diff --git a/public/assets/band.jpg b/public/assets/band.jpg new file mode 100644 index 0000000000000000000000000000000000000000..793a3f4bc3d18491d6b6f151b00d6a08e67b392f Binary files /dev/null and b/public/assets/band.jpg differ diff --git a/public/assets/band1.jpg b/public/assets/band1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..73dec62b87bc9c9dd8e7223197951b7392981deb Binary files /dev/null and b/public/assets/band1.jpg differ diff --git a/public/assets/band2.jpg b/public/assets/band2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..79f06bd6839361bd70d6a0ba24d03e616b50ec0a Binary files /dev/null and b/public/assets/band2.jpg differ diff --git a/public/assets/box.jpg b/public/assets/box.jpg new file mode 100644 index 0000000000000000000000000000000000000000..77aaf324373bf33c42a657890138faebdd583bb4 Binary files /dev/null and b/public/assets/box.jpg differ diff --git a/public/assets/community-event.jpg b/public/assets/community-event.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d151678412c0ca163e40026832fe372127ad18a8 Binary files /dev/null and b/public/assets/community-event.jpg differ diff --git a/public/assets/elderly-home.png b/public/assets/elderly-home.png new file mode 100644 index 0000000000000000000000000000000000000000..518402b5ac5ee6eb30631d0414ad0efa33b2eb29 Binary files /dev/null and b/public/assets/elderly-home.png differ diff --git a/public/assets/mat.jpg b/public/assets/mat.jpg new file mode 100644 index 0000000000000000000000000000000000000000..7fc4d96a56d02e1a591f6e019b83dba623bf4849 Binary files /dev/null and b/public/assets/mat.jpg differ diff --git a/public/assets/stick.jpg b/public/assets/stick.jpg new file mode 100644 index 0000000000000000000000000000000000000000..02eff3f28b7d7efcae164afe9aef26a9f5feddc8 Binary files /dev/null and b/public/assets/stick.jpg differ diff --git a/src/App.vue b/src/App.vue index 633a5dfe4e547c48bfa93740a290ba5ba370930a..9d0245ad9f0c9c3075e73a429d288119a11ba4b5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,47 +1,97 @@ - - - - - + + + + + \ No newline at end of file diff --git a/src/assets/base.css b/src/assets/base.css deleted file mode 100644 index 71dc55a3cb5a72589496743a327c738ead3e1c83..0000000000000000000000000000000000000000 --- a/src/assets/base.css +++ /dev/null @@ -1,74 +0,0 @@ -/* color palette from */ -:root { - --vt-c-white: #ffffff; - --vt-c-white-soft: #f8f8f8; - --vt-c-white-mute: #f2f2f2; - - --vt-c-black: #181818; - --vt-c-black-soft: #222222; - --vt-c-black-mute: #282828; - - --vt-c-indigo: #2c3e50; - - --vt-c-divider-light-1: rgba(60, 60, 60, 0.29); - --vt-c-divider-light-2: rgba(60, 60, 60, 0.12); - --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65); - --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48); - - --vt-c-text-light-1: var(--vt-c-indigo); - --vt-c-text-light-2: rgba(60, 60, 60, 0.66); - --vt-c-text-dark-1: var(--vt-c-white); - --vt-c-text-dark-2: rgba(235, 235, 235, 0.64); -} - -/* semantic color variables for this project */ -:root { - --color-background: var(--vt-c-white); - --color-background-soft: var(--vt-c-white-soft); - --color-background-mute: var(--vt-c-white-mute); - - --color-border: var(--vt-c-divider-light-2); - --color-border-hover: var(--vt-c-divider-light-1); - - --color-heading: var(--vt-c-text-light-1); - --color-text: var(--vt-c-text-light-1); - - --section-gap: 160px; -} - -@media (prefers-color-scheme: dark) { - :root { - --color-background: var(--vt-c-black); - --color-background-soft: var(--vt-c-black-soft); - --color-background-mute: var(--vt-c-black-mute); - - --color-border: var(--vt-c-divider-dark-2); - --color-border-hover: var(--vt-c-divider-dark-1); - - --color-heading: var(--vt-c-text-dark-1); - --color-text: var(--vt-c-text-dark-2); - } -} - -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - position: relative; - font-weight: normal; -} - -body { - min-height: 100vh; - color: var(--color-text); - background: var(--color-background); - transition: color 0.5s, background-color 0.5s; - line-height: 1.6; - font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, - Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; - font-size: 15px; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} diff --git a/src/assets/logo.svg b/src/assets/logo.svg deleted file mode 100644 index bc826fed80ad0c846e5ca25978776f555f4a2370..0000000000000000000000000000000000000000 --- a/src/assets/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/main.css b/src/assets/main.css deleted file mode 100644 index c133f9156b43080992482c4805bb9d6ad813c187..0000000000000000000000000000000000000000 --- a/src/assets/main.css +++ /dev/null @@ -1,35 +0,0 @@ -@import "./base.css"; - -#app { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - - font-weight: normal; -} - -a, -.green { - text-decoration: none; - color: hsla(160, 100%, 37%, 1); - transition: 0.4s; -} - -@media (hover: hover) { - a:hover { - background-color: hsla(160, 100%, 37%, 0.2); - } -} - -@media (min-width: 1024px) { - body { - display: flex; - place-items: center; - } - - #app { - display: grid; - grid-template-columns: 1fr 1fr; - padding: 0 2rem; - } -} diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue deleted file mode 100644 index 1b8faac1521345513353e96050dd24d94610d432..0000000000000000000000000000000000000000 --- a/src/components/HelloWorld.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/components/ProductCard.vue b/src/components/ProductCard.vue new file mode 100644 index 0000000000000000000000000000000000000000..a0a3cb10e89f09e9b7d40cc97efec56d00a0fc1a --- /dev/null +++ b/src/components/ProductCard.vue @@ -0,0 +1,45 @@ + + + + + \ No newline at end of file diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue deleted file mode 100644 index d3d2e7acc8a9deeb26e48169ee3cbc64d2b54f2f..0000000000000000000000000000000000000000 --- a/src/components/TheWelcome.vue +++ /dev/null @@ -1,84 +0,0 @@ - - - diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue deleted file mode 100644 index ba0def33c0e523d8c82426d76d76c39b482b21e0..0000000000000000000000000000000000000000 --- a/src/components/WelcomeItem.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - diff --git a/src/components/icons/IconCommunity.vue b/src/components/icons/IconCommunity.vue deleted file mode 100644 index 2dc8b055253af30fb797037e2fe260505f0cf711..0000000000000000000000000000000000000000 --- a/src/components/icons/IconCommunity.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconDocumentation.vue b/src/components/icons/IconDocumentation.vue deleted file mode 100644 index 6d4791cfbcf2782b3e5ffbabd042d4c47b2fbbed..0000000000000000000000000000000000000000 --- a/src/components/icons/IconDocumentation.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconEcosystem.vue b/src/components/icons/IconEcosystem.vue deleted file mode 100644 index c3a4f078c0bd340a33c61ea9ecd8a755d03571ed..0000000000000000000000000000000000000000 --- a/src/components/icons/IconEcosystem.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconSupport.vue b/src/components/icons/IconSupport.vue deleted file mode 100644 index 7452834d3ef961ce24c3a072ddba2620b6158bae..0000000000000000000000000000000000000000 --- a/src/components/icons/IconSupport.vue +++ /dev/null @@ -1,7 +0,0 @@ - diff --git a/src/components/icons/IconTooling.vue b/src/components/icons/IconTooling.vue deleted file mode 100644 index 660598d7c76644ffe126a1a1feb1606650bfb937..0000000000000000000000000000000000000000 --- a/src/components/icons/IconTooling.vue +++ /dev/null @@ -1,19 +0,0 @@ - - diff --git a/src/main.js b/src/main.js index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..f5606e1184ccbcba6c4e6b74820cb927b362a783 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,10 @@ -import { createApp } from 'vue' -import App from './App.vue' - -import './assets/main.css' - -createApp(App).mount('#app') +import { createApp } from 'vue' +import App from './App.vue' +import router from './router' +import ElementPlus from 'element-plus' +import 'element-plus/dist/index.css' + +const app = createApp(App) +app.use(router) +app.use(ElementPlus) +app.mount('#app') \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000000000000000000000000000000000000..2d23317075cefd8f0ba51fca3ce30876f459e348 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,39 @@ +import { createRouter, createWebHistory } from 'vue-router' +import Home from '../views/Home.vue' +import About from '../views/About.vue' +import Products from '../views/Products.vue' +import News from '../views/News.vue' +import Community from '../views/Community.vue' +import Login from '../views/Login.vue' +import Register from '../views/Register.vue' +import ProductDetail from '../views/ProductDetail.vue' +import NewsDetail from '../views/NewsDetail.vue' + +const routes = [ + { path: '/', component: Home }, + { path: '/about', component: About }, + { path: '/products', component: Products }, + { path: '/products/:id', component: ProductDetail }, + { path: '/news', component: News }, + { path: '/news/:id', component: NewsDetail }, + { path: '/community', component: Community }, + { path: '/login', component: Login }, + { path: '/register', component: Register }, +] + +const router = createRouter({ + history: createWebHistory(), + routes, +}) + +// 登录拦截 +router.beforeEach((to, from, next) => { + const isLogin = localStorage.getItem('isLogin') === 'true' + if (!isLogin && to.path !== '/login' && to.path !== '/register') { + next('/login') + } else { + next() + } +}) + +export default router \ No newline at end of file diff --git a/src/views/About.vue b/src/views/About.vue new file mode 100644 index 0000000000000000000000000000000000000000..9429c43e3b6ee2631d5b5d4a1abcf67efce09b3a --- /dev/null +++ b/src/views/About.vue @@ -0,0 +1,57 @@ + + + \ No newline at end of file diff --git a/src/views/Community.vue b/src/views/Community.vue new file mode 100644 index 0000000000000000000000000000000000000000..295a36347affa70c59872c6615f2afeb6647a7ee --- /dev/null +++ b/src/views/Community.vue @@ -0,0 +1,81 @@ + + + \ No newline at end of file diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000000000000000000000000000000000000..15c81da920ea4e7c9a25793eecf0ab6adb47a754 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,134 @@ + + + + + \ No newline at end of file diff --git a/src/views/Login.vue b/src/views/Login.vue new file mode 100644 index 0000000000000000000000000000000000000000..b62555862d3872605ead364abcb48641f3ad3ad9 --- /dev/null +++ b/src/views/Login.vue @@ -0,0 +1,158 @@ + + + + + \ No newline at end of file diff --git a/src/views/News.vue b/src/views/News.vue new file mode 100644 index 0000000000000000000000000000000000000000..688971437d21a04c9241130e6f8b884f54a09d9b --- /dev/null +++ b/src/views/News.vue @@ -0,0 +1,461 @@ + + + \ No newline at end of file diff --git a/src/views/NewsDetail.vue b/src/views/NewsDetail.vue new file mode 100644 index 0000000000000000000000000000000000000000..cb1da91f41700c438ebcc90bf35f11f772c76981 --- /dev/null +++ b/src/views/NewsDetail.vue @@ -0,0 +1,60 @@ + + \ No newline at end of file diff --git a/src/views/ProductDetail.vue b/src/views/ProductDetail.vue new file mode 100644 index 0000000000000000000000000000000000000000..e6c375e592f364f0b7d211c0f54967ad8c80abb6 --- /dev/null +++ b/src/views/ProductDetail.vue @@ -0,0 +1,48 @@ + + + \ No newline at end of file diff --git a/src/views/Products.vue b/src/views/Products.vue new file mode 100644 index 0000000000000000000000000000000000000000..0599c2d84d731fd64c218009c97134615c79c589 --- /dev/null +++ b/src/views/Products.vue @@ -0,0 +1,63 @@ + + + + + \ No newline at end of file diff --git a/src/views/Register.vue b/src/views/Register.vue new file mode 100644 index 0000000000000000000000000000000000000000..eb8ffa35e8083f2599301cf373649bac4b32e36e --- /dev/null +++ b/src/views/Register.vue @@ -0,0 +1,107 @@ + + + + + \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 72750c84fd059b235454d42595e063c061de7c68..16290dfbe6ee12395e9a99dbc2bcc8e8b47029ad 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,11 +1,9 @@ -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' - -// https://vitejs.dev/config/ -export default defineConfig({ - server: { - host: true, - allowedHosts: true - }, - plugins: [vue()] -}) +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + server: { + port: 5173 + } +}) \ No newline at end of file