diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a3f7a51 --- /dev/null +++ b/.gitignore @@ -0,0 +1,36 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-ssr +coverage +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +*.tsbuildinfo + +.eslintcache + +# Cypress +/cypress/videos/ +/cypress/screenshots/ + +# Vitest +__screenshots__/ diff --git a/src/App.vue b/src/App.vue index 6ec9f60..b9ad9ef 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,11 +1,135 @@ - + - + \ No newline at end of file diff --git a/src/assets/styles/reset.css b/src/assets/styles/reset.css new file mode 100644 index 0000000..345405d --- /dev/null +++ b/src/assets/styles/reset.css @@ -0,0 +1,73 @@ +/* reset.css */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Custom reset additions */ +*, *:before, *:after { + box-sizing: border-box; +} + +a { + text-decoration: none; + color: inherit; +} + +button, input, textarea { + outline: none; + border: none; + background: none; + font-family: inherit; +} + +img { + max-width: 100%; + height: auto; + display: block; +} \ No newline at end of file diff --git a/src/assets/styles/var.less b/src/assets/styles/var.less new file mode 100644 index 0000000..6dae481 --- /dev/null +++ b/src/assets/styles/var.less @@ -0,0 +1,64 @@ +// 主色调 +@primary-color: #ff6b00; +@primary-color-light: #ff8c00; +@primary-color-dark: #e55a00; + +// 辅助色 +@success-color: #00cc66; +@warning-color: #ff9900; +@error-color: #ff3333; + +// 中性色 +@white: #ffffff; +@black: #000000; +@gray-1: #f5f5f5; +@gray-2: #eeeeee; +@gray-3: #dddddd; +@gray-4: #cccccc; +@gray-5: #999999; +@gray-6: #666666; +@gray-7: #333333; + +// 文字颜色 +@text-color-primary: @gray-7; +@text-color-secondary: @gray-6; +@text-color-placeholder: @gray-5; +@text-color-disabled: @gray-4; + +// 边框颜色 +@border-color-base: @gray-3; +@border-color-split: @gray-2; + +// 背景色 +@bg-color-base: @gray-1; +@bg-color-light: @white; + +// 字体大小 +@font-size-xs: 10px; +@font-size-sm: 12px; +@font-size-md: 14px; +@font-size-lg: 16px; +@font-size-xl: 18px; +@font-size-xxl: 20px; + +// 间距 +@spacing-xs: 4px; +@spacing-sm: 8px; +@spacing-md: 12px; +@spacing-lg: 16px; +@spacing-xl: 20px; +@spacing-xxl: 24px; + +// 圆角 +@border-radius-sm: 2px; +@border-radius-md: 4px; +@border-radius-lg: 8px; +@border-radius-xl: 16px; +@border-radius-circle: 50%; + +// 阴影 +@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.1); +@box-shadow-up: 0 -2px 8px rgba(0, 0, 0, 0.1); +@box-shadow-down: 0 2px 8px rgba(0, 0, 0, 0.1); +@box-shadow-left: -2px 0 8px rgba(0, 0, 0, 0.1); +@box-shadow-right: 2px 0 8px rgba(0, 0, 0, 0.1); \ No newline at end of file diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue new file mode 100644 index 0000000..cd4dac2 --- /dev/null +++ b/src/components/AppFooter.vue @@ -0,0 +1,73 @@ + + + + + \ No newline at end of file diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue new file mode 100644 index 0000000..ad3253b --- /dev/null +++ b/src/components/AppHeader.vue @@ -0,0 +1,81 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index f858fbf..d950030 100644 --- a/src/main.js +++ b/src/main.js @@ -2,8 +2,10 @@ import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; import "amfe-flexible"; +import "./assets/styles/reset.css"; + const app = createApp(App); app.use(router); -app.mount("#app"); +app.mount("#app"); \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index e1eab52..25a6a12 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,8 +1,73 @@ -import { createRouter, createWebHistory } from 'vue-router' +import { createRouter, createWebHistory } from "vue-router"; +import MainLayout from "@/views/MainLayout.vue"; +import MoviesLayout from "@/views/movies/MoviesLayout.vue"; +import MovieView from "@/views/movies/MovieView.vue"; +import VideoView from "@/views/movies/VideoView.vue"; +import ShowView from "@/views/movies/ShowView.vue"; +import ProfileView from "@/views/movies/ProfileView.vue"; +import AddressView from "@/views/AddressView.vue"; +import SearchView from "@/views/SearchView.vue"; +import DetailView from "@/views/DetailView.vue"; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), - routes: [], -}) + routes: [ + { + path: "/main", + component: MainLayout, + children: [ + { + path: "/main", + redirect: "/main/movie", + }, + { + path: "movie", + component: MoviesLayout, + children: [ + { + path: "", + redirect: "/main/movie/film", + }, + { + path: "/main/movie/film", + name: "movie", + component: MovieView, + }, + { + path: "/main/movie/cinema", + name: "video", + component: VideoView, + }, + { + path: "/main/movie/show", + name: "show", + component: ShowView, + }, + { + path: "/main/movie/my", + name: "profile", + component: ProfileView, + }, + ], + }, + ], + }, + { + path: "/address", + name: "address", + component: AddressView, + }, + { + path: "/search", + name: "search", + component: SearchView, + }, + { + path: "/detail", + name: "detail", + component: DetailView, + }, + ], +}); -export default router +export default router; diff --git a/src/views/AddressView.vue b/src/views/AddressView.vue new file mode 100644 index 0000000..812e956 --- /dev/null +++ b/src/views/AddressView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue new file mode 100644 index 0000000..46700e6 --- /dev/null +++ b/src/views/DetailView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue new file mode 100644 index 0000000..42ce934 --- /dev/null +++ b/src/views/MainLayout.vue @@ -0,0 +1,21 @@ + + + + + \ No newline at end of file diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue new file mode 100644 index 0000000..9d2b2ba --- /dev/null +++ b/src/views/SearchView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/views/movies/MovieView.vue b/src/views/movies/MovieView.vue new file mode 100644 index 0000000..8ac97eb --- /dev/null +++ b/src/views/movies/MovieView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/views/movies/MoviesLayout.vue b/src/views/movies/MoviesLayout.vue new file mode 100644 index 0000000..f43cd0a --- /dev/null +++ b/src/views/movies/MoviesLayout.vue @@ -0,0 +1,170 @@ + + + + + \ No newline at end of file diff --git a/src/views/movies/ProfileView.vue b/src/views/movies/ProfileView.vue new file mode 100644 index 0000000..adb0a85 --- /dev/null +++ b/src/views/movies/ProfileView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/views/movies/ShowView.vue b/src/views/movies/ShowView.vue new file mode 100644 index 0000000..89e0394 --- /dev/null +++ b/src/views/movies/ShowView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/src/views/movies/VideoView.vue b/src/views/movies/VideoView.vue new file mode 100644 index 0000000..cc9a99a --- /dev/null +++ b/src/views/movies/VideoView.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index d93da0f..9549fba 100644 --- a/vite.config.js +++ b/vite.config.js @@ -10,7 +10,7 @@ export default defineConfig({ css: { preprocessorOptions: { less: { - additionalData: `@import "${path.resolve(__dirname, "src/assets/css/var.less")}";`, + additionalData: `@import "${path.resolve(__dirname, "src/assets/styles/var.less")}";`, }, }, }, @@ -22,4 +22,4 @@ export default defineConfig({ server: { host: "0.0.0.0", }, -}); +}); \ No newline at end of file