wxc
2 years ago
commit
b7b9dd950c
19 changed files with 410 additions and 0 deletions
@ -0,0 +1,26 @@
|
||||
# Logs |
||||
logs |
||||
*.log |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
pnpm-debug.log* |
||||
lerna-debug.log* |
||||
|
||||
node_modules |
||||
dist |
||||
dist-ssr |
||||
*.local |
||||
|
||||
# Editor directories and files |
||||
.vscode/* |
||||
!.vscode/extensions.json |
||||
.idea |
||||
.DS_Store |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw? |
||||
|
||||
.history |
||||
@ -0,0 +1,3 @@
|
||||
{ |
||||
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] |
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
<!doctype html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>局长信箱 即接即办</title> |
||||
</head> |
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/main.js"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,23 @@
|
||||
{ |
||||
"name": "mailbox-outer-h5", |
||||
"private": true, |
||||
"version": "0.0.0", |
||||
"type": "module", |
||||
"scripts": { |
||||
"dev": "vite", |
||||
"build": "vite build", |
||||
"preview": "vite preview" |
||||
}, |
||||
"dependencies": { |
||||
"vant": "^4.8.2", |
||||
"vue": "^3.3.11", |
||||
"vue-router": "^4.2.5" |
||||
}, |
||||
"devDependencies": { |
||||
"@vitejs/plugin-vue": "^4.5.2", |
||||
"sass": "^1.69.7", |
||||
"unplugin-auto-import": "^0.17.3", |
||||
"vite": "^5.0.8", |
||||
"vite-svg-loader": "^5.1.0" |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 362 KiB |
@ -0,0 +1,11 @@
|
||||
<script setup> |
||||
|
||||
</script> |
||||
|
||||
<template> |
||||
<router-view /> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,29 @@
|
||||
<template> |
||||
<div :style="{ fontSize: size ? `${size}px` : '' }"> |
||||
<IconSvg /> |
||||
</div> |
||||
</template> |
||||
<script setup> |
||||
const props = defineProps({ |
||||
name: { |
||||
type: String, |
||||
require: true, |
||||
}, |
||||
size: { |
||||
type: Number, |
||||
}, |
||||
}); |
||||
|
||||
let IconSvg = ref(h("template")); |
||||
|
||||
import(`@/assets/icons/${props.name}.svg`).then((data) => { |
||||
IconSvg.value = data.render(); |
||||
}); |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
:deep() { |
||||
svg { |
||||
display: block; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,16 @@
|
||||
import { createApp } from 'vue' |
||||
import router from './router/index' |
||||
|
||||
import './style.scss' |
||||
import 'vant/lib/index.css'; |
||||
import App from './App.vue' |
||||
import { Button, Tab, Tabs } from 'vant'; |
||||
import Icon from '@/components/Icon.vue' |
||||
|
||||
createApp(App) |
||||
.use(router) |
||||
.use(Button) |
||||
.use(Tab) |
||||
.use(Tabs) |
||||
.component('Icon', Icon) |
||||
.mount('#app') |
||||
@ -0,0 +1,32 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router' |
||||
|
||||
import Home from '@/views/Home.vue' |
||||
import Mail from '@/views/mail/Index.vue' |
||||
|
||||
import NotFound from '@/views/error/404.vue' |
||||
|
||||
const constantRoutes = [ |
||||
{ |
||||
path: '/', |
||||
component: Home |
||||
}, |
||||
{ |
||||
path: '/mail', |
||||
component: Mail |
||||
}, |
||||
{ |
||||
path: '/:catchAll(.*)', |
||||
name: 'not-found', |
||||
component: NotFound, |
||||
meta: { |
||||
title: '404' |
||||
} |
||||
} |
||||
]; |
||||
|
||||
const router = createRouter({ |
||||
history: createWebHashHistory(), |
||||
routes: constantRoutes |
||||
}); |
||||
|
||||
export default router; |
||||
@ -0,0 +1,136 @@
|
||||
:root:root { |
||||
--primary-color: #184DCF; |
||||
--van-blue: var(--primary-color); |
||||
|
||||
} |
||||
|
||||
body { |
||||
font-size: 14px; |
||||
font-family: PingFang-SC-Heavy; |
||||
margin: 0; |
||||
--header-height: 8.377vh; |
||||
} |
||||
|
||||
#app { |
||||
max-width: 1200px; |
||||
margin: auto; |
||||
} |
||||
|
||||
p { |
||||
margin: 0.5em 0; |
||||
} |
||||
|
||||
svg { |
||||
width: 1em; |
||||
} |
||||
|
||||
svg+span { |
||||
margin-left: .5em; |
||||
} |
||||
|
||||
.none { |
||||
display: none; |
||||
} |
||||
.flex { |
||||
display: flex; |
||||
} |
||||
.flex-inline { |
||||
display: inline-flex; |
||||
} |
||||
|
||||
.flex.v-center, .flex-inline.v-center { |
||||
align-items: center; |
||||
} |
||||
|
||||
.flex.center, .flex-inline.center { |
||||
justify-content: center; |
||||
} |
||||
|
||||
.flex.between, .flex-inline.between { |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.flex.end, .flex-inline.end { |
||||
justify-content: flex-end; |
||||
} |
||||
|
||||
.flex.wrap, .flex-inline.wrap { |
||||
flex-wrap: wrap; |
||||
} |
||||
.flex.max-content, .flex-inline.max-content { |
||||
width: max-content; |
||||
} |
||||
.flex.gap, .flex-inline.gap { |
||||
gap: 0 8px; |
||||
} |
||||
.flex.gap-10 { |
||||
gap: 0 10px; |
||||
} |
||||
.flex.gap-16 { |
||||
gap: 0 16px; |
||||
} |
||||
|
||||
.text-center { |
||||
text-align: center; |
||||
} |
||||
.text-nowrap { |
||||
white-space: nowrap; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
} |
||||
.text-wrap { |
||||
white-space: pre-wrap; |
||||
} |
||||
|
||||
.container { |
||||
padding: 18px 36px; |
||||
} |
||||
|
||||
.pointer:hover { |
||||
cursor: pointer; |
||||
} |
||||
.relative { |
||||
position: relative; |
||||
} |
||||
.ml-4 { |
||||
margin-left: 4px; |
||||
} |
||||
.ml-8 { |
||||
margin-left: 8px; |
||||
} |
||||
.ml-10 { |
||||
margin-left: 10px; |
||||
} |
||||
.mr-4 { |
||||
margin-right: 4px; |
||||
} |
||||
.mr-8 { |
||||
margin-right: 8px; |
||||
} |
||||
.mr-10 { |
||||
margin-right: 10px; |
||||
} |
||||
.mr-20 { |
||||
margin-right: 20px; |
||||
} |
||||
.mt-8 { |
||||
margin-top: 8px; |
||||
} |
||||
.mt-10 { |
||||
margin-top: 10px; |
||||
} |
||||
.mt-20 { |
||||
margin-top: 20px; |
||||
} |
||||
.mb-8 { |
||||
margin-bottom: 8px; |
||||
} |
||||
.mb-10 { |
||||
margin-bottom: 10px; |
||||
} |
||||
.mb-20 { |
||||
margin-bottom: 20px; |
||||
} |
||||
.mb-40 { |
||||
margin-bottom: 40px; |
||||
} |
||||
@ -0,0 +1,43 @@
|
||||
<template> |
||||
<header> |
||||
<img src="/imgs/bg.png" alt=""> |
||||
</header> |
||||
<main> |
||||
<div class="flex gap-10 center mt-20"> |
||||
<a class="flex v-center center gap-16" @click="router.push('/mail')"> |
||||
<Icon name="write" :size="48" /> |
||||
<span>我要写信</span> |
||||
</a> |
||||
<a class="flex v-center center gap-16"> |
||||
<Icon name="search" :size="48" /> |
||||
<span>回复查询</span> |
||||
</a> |
||||
</div> |
||||
<p class="text-center mt-20">局长信箱只接受实名举报投诉，不受理报警业务</p> |
||||
<p class="text-center">如遇紧急情况请拨打110</p> |
||||
</main> |
||||
</template> |
||||
<script setup> |
||||
import { useRouter } from 'vue-router' |
||||
|
||||
const router = useRouter() |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
header { |
||||
img { |
||||
width: 100%; |
||||
} |
||||
} |
||||
a { |
||||
width: 45.2%; |
||||
height: 84px; |
||||
text-decoration: none; |
||||
border: 1px solid var(--primary-color); |
||||
color: var(--primary-color); |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
&:hover { |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,9 @@
|
||||
<template> |
||||
<h1>404</h1> |
||||
</template> |
||||
<script setup> |
||||
|
||||
</script> |
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,11 @@
|
||||
<template> |
||||
<van-tabs v-model:active="active"> |
||||
<van-tab title="我要写信">我要写信</van-tab> |
||||
<van-tab title="我的信件">我的信件</van-tab> |
||||
<van-tab title="草稿箱">草稿箱</van-tab> |
||||
</van-tabs> |
||||
</template> |
||||
<script setup> |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,29 @@
|
||||
import { defineConfig } from 'vite' |
||||
import vue from '@vitejs/plugin-vue' |
||||
import AutoImport from 'unplugin-auto-import/vite' |
||||
import svgLoader from 'vite-svg-loader' |
||||
import path from 'path' |
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({ |
||||
plugins: [ |
||||
vue(), |
||||
svgLoader(), |
||||
AutoImport({ |
||||
imports: [ |
||||
'vue' |
||||
] |
||||
}), |
||||
], |
||||
resolve: { |
||||
// https://cn.vitejs.dev/config/#resolve-alias
|
||||
alias: { |
||||
// 设置路径
|
||||
'~': path.resolve(__dirname, './'), |
||||
// 设置别名
|
||||
'@': path.resolve(__dirname, './src/') |
||||
}, |
||||
// https://cn.vitejs.dev/config/#resolve-extensions
|
||||
extensions: ['.js'] |
||||
}, |
||||
}) |
||||
Loading…
Reference in new issue