init
This commit is contained in:
parent
55fb3e84cd
commit
64cb41f74e
67
package-lock.json
generated
67
package-lock.json
generated
@ -6151,6 +6151,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"interpret": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npm.taobao.org/interpret/download/interpret-1.2.0.tgz?cache=0&sync_timestamp=1571708682279&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Finterpret%2Fdownload%2Finterpret-1.2.0.tgz",
|
||||
"integrity": "sha1-1QYaYiS+WOgIOYX1AU2EQ1lXYpY=",
|
||||
"dev": true
|
||||
},
|
||||
"invariant": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npm.taobao.org/invariant/download/invariant-2.2.4.tgz",
|
||||
@ -9085,6 +9091,15 @@
|
||||
"readable-stream": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"rechoir": {
|
||||
"version": "0.6.2",
|
||||
"resolved": "https://registry.npm.taobao.org/rechoir/download/rechoir-0.6.2.tgz",
|
||||
"integrity": "sha1-hSBLVNuoLVdC4oyWdW70OvUOM4Q=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"resolve": "^1.1.6"
|
||||
}
|
||||
},
|
||||
"redent": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npm.taobao.org/redent/download/redent-1.0.0.tgz",
|
||||
@ -9469,6 +9484,15 @@
|
||||
"integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
|
||||
"dev": true
|
||||
},
|
||||
"sass": {
|
||||
"version": "1.26.3",
|
||||
"resolved": "https://registry.npm.taobao.org/sass/download/sass-1.26.3.tgz?cache=0&sync_timestamp=1583972683391&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass%2Fdownload%2Fsass-1.26.3.tgz",
|
||||
"integrity": "sha1-QS31RIYUO3a1plzfdWnob0Rln0Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chokidar": ">=2.0.0 <4.0.0"
|
||||
}
|
||||
},
|
||||
"sass-graph": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npm.taobao.org/sass-graph/download/sass-graph-2.2.4.tgz",
|
||||
@ -9909,6 +9933,17 @@
|
||||
"integrity": "sha1-Z6fQLHbJ2iT5nSCAj8re0ODgS+I=",
|
||||
"dev": true
|
||||
},
|
||||
"shelljs": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npm.taobao.org/shelljs/download/shelljs-0.8.3.tgz",
|
||||
"integrity": "sha1-p/MxlSDr8J7oEnWyNorbKGZZsJc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"glob": "^7.0.0",
|
||||
"interpret": "^1.0.0",
|
||||
"rechoir": "^0.6.2"
|
||||
}
|
||||
},
|
||||
"signal-exit": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.2.tgz",
|
||||
@ -11163,6 +11198,24 @@
|
||||
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.11.tgz",
|
||||
"integrity": "sha1-dllNh31LEiNEBuhONSdcbVFBJcU="
|
||||
},
|
||||
"vue-cli-plugin-vuetify": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.0.5.tgz",
|
||||
"integrity": "sha1-Cbp4koZT/H44Aeo35RIPlXQT3aQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"semver": "^7.1.2",
|
||||
"shelljs": "^0.8.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"semver": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npm.taobao.org/semver/download/semver-7.1.3.tgz?cache=0&sync_timestamp=1581458265183&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsemver%2Fdownload%2Fsemver-7.1.3.tgz",
|
||||
"integrity": "sha1-5DRc5zBxxT8zZEXPwZ77HDEd8qY=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
|
||||
@ -11229,6 +11282,20 @@
|
||||
"integrity": "sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=",
|
||||
"dev": true
|
||||
},
|
||||
"vuetify": {
|
||||
"version": "2.2.18",
|
||||
"resolved": "https://registry.npm.taobao.org/vuetify/download/vuetify-2.2.18.tgz",
|
||||
"integrity": "sha1-WkO+r3yPxm3PtYduFhn35Ex4gdo="
|
||||
},
|
||||
"vuetify-loader": {
|
||||
"version": "1.4.3",
|
||||
"resolved": "https://registry.npm.taobao.org/vuetify-loader/download/vuetify-loader-1.4.3.tgz",
|
||||
"integrity": "sha1-3xMjxVi+CYkId+X76BezpxpsU40=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npm.taobao.org/vuex/download/vuex-3.1.3.tgz",
|
||||
|
||||
16
package.json
16
package.json
@ -4,13 +4,22 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
"build": "vue-cli-service build",
|
||||
"buildsuper": "vue-cli-service build --modern"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"core-js": "^3.6.4",
|
||||
"crc-32": "^1.2.0",
|
||||
"crypto-js": "^4.0.0",
|
||||
"register-service-worker": "^1.6.2",
|
||||
"vconsole": "^3.3.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-clipboard2": "^0.3.1",
|
||||
"vue-router": "^3.1.5",
|
||||
"vue-svg-icon": "^1.2.9",
|
||||
"vue-touch": "^2.0.0-beta.4",
|
||||
"vuetify": "^2.2.11",
|
||||
"vuex": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -20,7 +29,10 @@
|
||||
"@vue/cli-plugin-vuex": "~4.2.0",
|
||||
"@vue/cli-service": "~4.2.0",
|
||||
"node-sass": "^4.12.0",
|
||||
"sass": "^1.19.0",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
"vue-cli-plugin-vuetify": "~2.0.5",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"vuetify-loader": "^1.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,6 +6,8 @@
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
81
src/App.vue
81
src/App.vue
@ -1,32 +1,73 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
<icon class="bg" name="canary"></icon>
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "App",
|
||||
data: () => {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
...mapActions(["setBgImgUrl"]),
|
||||
init() {
|
||||
let url = `https://i.picsum.photos/id/${Math.floor(
|
||||
Math.random() * 1000
|
||||
)}/1920/1080.jpg`;
|
||||
this.setBgImgUrl([url, this])
|
||||
// Light theme
|
||||
this.$vuetify.theme.themes.light.primary = '#000'
|
||||
// Dark theme
|
||||
this.$vuetify.theme.themes.dark.primary = '#fff'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC",
|
||||
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
/* text-align: center; */
|
||||
// color: #2c3e50;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
.bg {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: -100;
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
margin-top: -5rem;
|
||||
margin-left: -5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
#__vconsole {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vconsole-show {
|
||||
display: block !important;
|
||||
}
|
||||
</style>
|
||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa" target="_blank" rel="noopener">pwa</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="scss">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
18
src/main.js
18
src/main.js
@ -3,11 +3,29 @@ import App from './App.vue'
|
||||
import './registerServiceWorker'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import vuetify from './plugins/vuetify';
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
// icon-loader
|
||||
import Icon from 'vue-svg-icon/Icon.vue'
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
// 剪切板
|
||||
import VueClipboard from "vue-clipboard2";
|
||||
Vue.use(VueClipboard);
|
||||
|
||||
// 手势控件
|
||||
import VueTouch from "vue-touch";
|
||||
Vue.use(VueTouch, {name: 'v-touch'})
|
||||
|
||||
// vconsole
|
||||
import Vconsole from 'vconsole';
|
||||
new Vconsole();
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
||||
7
src/plugins/vuetify.js
Normal file
7
src/plugins/vuetify.js
Normal file
@ -0,0 +1,7 @@
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib';
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
|
||||
});
|
||||
@ -1,6 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@ -8,16 +7,19 @@ const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home
|
||||
component: () => import(/* webpackChunkName: "home" */ '../views/Home/Home.vue')
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'About',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||
}
|
||||
path: '/account',
|
||||
name: 'Account',
|
||||
component: () => import(/* webpackChunkName: "account" */ '../views/Account/Account.vue')
|
||||
},
|
||||
{
|
||||
path: '*', // 页面不存在的情况下会跳到主页
|
||||
redirect: '/',
|
||||
name: 'notFound',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
|
||||
@ -5,10 +5,21 @@ Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
// 全局背景图片
|
||||
bg_img_url: '',
|
||||
},
|
||||
mutations: {
|
||||
// 设置全局背景图片
|
||||
SET_BGIMGURL(state, bg_img_url) {
|
||||
state.bg_img_url = bg_img_url;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置全局背景图片
|
||||
setBgImgUrl({ commit }, arg) {
|
||||
commit('SET_BGIMGURL', arg[0]);
|
||||
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||
},
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
|
||||
1
src/svg/canary.svg
Normal file
1
src/svg/canary.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#E0E0E0"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
7
src/utils/px2rem.js
Normal file
7
src/utils/px2rem.js
Normal file
@ -0,0 +1,7 @@
|
||||
//px2rem
|
||||
export function setHtmlFontSize() {
|
||||
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
|
||||
const htmlDom = document.getElementsByTagName('html')[0]
|
||||
if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
|
||||
else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
101
src/views/Account/Account.vue
Normal file
101
src/views/Account/Account.vue
Normal file
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<v-sheet class="fill-height">
|
||||
<!-- 标题栏 -->
|
||||
<v-toolbar dark :src="bg_img_url">
|
||||
<!-- 图片遮罩 -->
|
||||
<template v-slot:img="{ props }">
|
||||
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
||||
</template>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<v-btn icon :disabled="loading_switch">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
<!-- 标题 -->
|
||||
<v-toolbar-title>账户</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
|
||||
<!-- 登录 -->
|
||||
<v-sheet v-if="page_type == 'login'">
|
||||
<v-form ref="form" v-model="valid" class="ma-4">
|
||||
<!-- 教务账号 -->
|
||||
<v-text-field
|
||||
v-model="cid"
|
||||
:counter="10"
|
||||
:rules="[v => !!v || '请填入教务账号', v => (v && v.length == 10) || '请输入正确的账号']"
|
||||
label="教务账号"
|
||||
required
|
||||
clearable
|
||||
:disabled="loading_switch"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 教务密码 -->
|
||||
<v-text-field
|
||||
v-model="pwd"
|
||||
:rules="[v => !!v || '请填入教务密码']"
|
||||
label="教务密码"
|
||||
required
|
||||
clearable
|
||||
:disabled="loading_switch"
|
||||
type="password"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 提交 -->
|
||||
<v-btn
|
||||
color="success"
|
||||
:disabled="!valid"
|
||||
@click="resetValidation"
|
||||
:loading="loading_switch"
|
||||
class="float-right mt-5"
|
||||
>验证账户</v-btn>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
|
||||
<!-- 账户系统 -->
|
||||
<v-sheet>
|
||||
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "Add",
|
||||
data: () => {
|
||||
return {
|
||||
valid: true,
|
||||
cid: "",
|
||||
pwd: "",
|
||||
loading_switch: false,
|
||||
page_type: "login",
|
||||
user_info: {
|
||||
name: '赵英博',
|
||||
nick: '嘤嘤嘤',
|
||||
id: '170521328',
|
||||
cid: '2017002372',
|
||||
created: '',
|
||||
pwd: '',
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["bg_img_url"])
|
||||
},
|
||||
methods: {
|
||||
init() {}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
</script>
|
||||
216
src/views/Home/Home.vue
Normal file
216
src/views/Home/Home.vue
Normal file
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<v-app id="home-app">
|
||||
<!-- 顶部菜单 -->
|
||||
<v-app-bar
|
||||
app
|
||||
relative
|
||||
dark
|
||||
:src="bg_img_url"
|
||||
>
|
||||
<!-- 图片遮罩 -->
|
||||
<template v-slot:img="{ props }">
|
||||
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
||||
</template>
|
||||
|
||||
<!-- 抽屉按钮 -->
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<!-- 标题 -->
|
||||
<v-toolbar-title>Canary 失物招领</v-toolbar-title>
|
||||
|
||||
<!-- 空白占位 -->
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- 搜索icon -->
|
||||
<v-btn icon @click="banner_switch = !banner_switch">
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- 刷新icon -->
|
||||
<v-btn icon @click="loading_switch = !loading_switch">
|
||||
<v-icon>mdi-refresh</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- tab选项 -->
|
||||
<template v-slot:extension>
|
||||
<v-tabs grow>
|
||||
<v-tab @click="page_type = 'lost'">失物</v-tab>
|
||||
<v-tab @click="page_type = 'found'">招领</v-tab>
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- 抽屉 -->
|
||||
<v-navigation-drawer v-model="drawer" fixed temporary app>
|
||||
<v-img :aspect-ratio="16/9" :src="bg_img_url" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)">
|
||||
<v-row align="end" class="lightbox white--text pa-2 fill-height">
|
||||
<v-col>
|
||||
<div class="subheading">赵英博</div>
|
||||
<div class="body-1">170521328</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-img>
|
||||
<v-list>
|
||||
<!-- 账户 -->
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-account</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>账户</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 设置 -->
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-cog</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>设置</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 分享 -->
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-share</v-icon>
|
||||
</v-list-item-icon>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>分享链接</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<v-sheet class="fill-height" >
|
||||
<!-- 空白占位 -->
|
||||
<div id="sheets"></div>
|
||||
|
||||
<!-- 进度条 -->
|
||||
<v-progress-linear
|
||||
fixed
|
||||
indeterminate
|
||||
height="5"
|
||||
color="primary"
|
||||
:active="loading_switch"
|
||||
></v-progress-linear>
|
||||
|
||||
<!-- 未登录提醒 -->
|
||||
<v-banner single-line :value="banner_switch">
|
||||
<div class="caption">您还未登录，登录后即可享受全部功能</div>
|
||||
<template v-slot:actions>
|
||||
<v-btn text color="primary">登录</v-btn>
|
||||
</template>
|
||||
</v-banner>
|
||||
|
||||
<!-- lost列表 -->
|
||||
<v-sheet v-show="page_type=='lost'">
|
||||
<v-container fluid >
|
||||
<v-row no-gutters>
|
||||
<Card v-for="(item, i) in found" :key="i" :content="item"></Card>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-sheet>
|
||||
|
||||
<!-- found列表 -->
|
||||
<v-sheet v-show="page_type=='found'">
|
||||
<v-container fluid>
|
||||
<v-row no-gutters>
|
||||
<Card v-for="(item, i) in found" :key="i" :content="item"></Card>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-sheet>
|
||||
</v-sheet>
|
||||
|
||||
<v-bottom-sheet v-model="add_switch" persistent fullscreen @touchmove.prevent>
|
||||
<Add :closeBottomSheet="closeBottomSheet"></Add>
|
||||
</v-bottom-sheet>
|
||||
|
||||
<!-- 小圆纽 -->
|
||||
<v-card-text style="height: 100px; position: fixed; bottom: 0">
|
||||
<v-btn absolute dark fab right @click="add_switch = true">
|
||||
<v-icon>mdi-plus</v-icon>
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
import Card from "./children/Card";
|
||||
import Add from "./children/Add";
|
||||
export default {
|
||||
name: "Home",
|
||||
data: () => {
|
||||
return {
|
||||
page_type: "lost",
|
||||
drawer: false,
|
||||
lost: [],
|
||||
found: [],
|
||||
// 加载条
|
||||
loading_switch: false,
|
||||
// 未登录banner
|
||||
banner_switch: false,
|
||||
// 新建窗口
|
||||
add_switch: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState([
|
||||
"bg_img_url"
|
||||
]),
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let item = {
|
||||
title: "这是丢失的物品",
|
||||
create_time: "2020-01-01",
|
||||
img_url: "https://picsum.photos/1920/1080?random",
|
||||
total_addr: "长理东区",
|
||||
good_type: "lost",
|
||||
good_id: "1111"
|
||||
};
|
||||
for (let i = 0; i < 10; i++) {
|
||||
this.lost.push(item);
|
||||
this.found.push(item);
|
||||
}
|
||||
},
|
||||
|
||||
// 关闭底部表单-add
|
||||
closeBottomSheet() {
|
||||
this.add_switch = false
|
||||
},
|
||||
|
||||
// 设置空白占位的高度
|
||||
resetSheetHeight(){
|
||||
// 设置空白高度
|
||||
document.getElementById(
|
||||
"sheets"
|
||||
).style.height = document.getElementsByTagName("header")[0].style.height;
|
||||
console.log('空白占位高度设置完成')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
// 设置空白占位的高度
|
||||
this.resetSheetHeight()
|
||||
// 屏幕变化的时候也更新高度
|
||||
window.onresize = function temp() {
|
||||
console.log('屏幕大小发生改变')
|
||||
this.resetSheetHeight();
|
||||
}.bind(this);
|
||||
},
|
||||
components: {
|
||||
Card,
|
||||
Add
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
150
src/views/Home/children/Add.vue
Normal file
150
src/views/Home/children/Add.vue
Normal file
@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<v-sheet class="fill-height" >
|
||||
<!-- 标题栏 -->
|
||||
<v-toolbar dark :src="bg_img_url">
|
||||
<!-- 图片遮罩 -->
|
||||
<template v-slot:img="{ props }">
|
||||
<v-img v-bind="props" gradient="to top right, rgba(0,0,0,0.3), rgba(0,0,0,0.4)"></v-img>
|
||||
</template>
|
||||
|
||||
<!-- 关闭按钮 -->
|
||||
<v-btn icon @click="close" :disabled="loading_switch">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- 标题 -->
|
||||
<v-toolbar-title>创建失物招领</v-toolbar-title>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
|
||||
<v-form ref="form" v-model="valid" class="ma-4">
|
||||
<!-- 信息类型 -->
|
||||
<v-radio-group row color="primary" v-model="good_type" :disabled="loading_switch">
|
||||
<v-radio label="捡到东西" value="found"></v-radio>
|
||||
<v-radio label="丢了东西" value="lost"></v-radio>
|
||||
</v-radio-group>
|
||||
|
||||
<!-- 标题 -->
|
||||
<v-text-field
|
||||
v-model="title"
|
||||
:counter="10"
|
||||
:rules="[v => !!v || '请填入标题', v => (v && v.length <= 10) || '标题不能超过十个字']"
|
||||
label="标题"
|
||||
required
|
||||
clearable
|
||||
:disabled="loading_switch"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 内容 -->
|
||||
<v-textarea
|
||||
v-model="content"
|
||||
:counter="50"
|
||||
:rules="[v => !!v || '请填入内容', v => (v && v.length <= 50) || '内容不能超过五十个字']"
|
||||
label="内容"
|
||||
rows="3"
|
||||
required
|
||||
clearable
|
||||
:disabled="loading_switch"
|
||||
></v-textarea>
|
||||
|
||||
<!-- 地区 -->
|
||||
<v-select
|
||||
v-model="total_addr"
|
||||
:items="['长理东区', '长理南区', '长理西区']"
|
||||
:rules="[v => !!v || '必须选择一个地区']"
|
||||
label="地区"
|
||||
required
|
||||
:disabled="loading_switch"
|
||||
></v-select>
|
||||
|
||||
<!-- 详细地址 -->
|
||||
<v-text-field
|
||||
v-model="detail_addr"
|
||||
:rules="[v => !!v || '请填入内容', v => (v && v.length <= 30) || '内容不能超过三十个字']"
|
||||
label="详细地址"
|
||||
required
|
||||
clearable
|
||||
:disabled="loading_switch"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 联系方式 -->
|
||||
<v-text-field
|
||||
v-model="contact_content"
|
||||
:rules="[v => (!!v ? (v && v.length >= 5) || '联系信息长度必须大于5' : true)]"
|
||||
label="联系方式(选填)"
|
||||
clearable
|
||||
:disabled="loading_switch"
|
||||
></v-text-field>
|
||||
|
||||
<!-- 图片上传 -->
|
||||
<v-file-input show-size label="图片上传" v-model="upload_file" :disabled="loading_switch"></v-file-input>
|
||||
|
||||
<v-btn color="error" class="mr-4" @click="reset" rounded :disabled="loading_switch">重置</v-btn>
|
||||
|
||||
<v-btn color="success" @click="resetValidation" rounded :loading="loading_switch">确认提交</v-btn>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import { mapState, mapActions } from "vuex";
|
||||
export default {
|
||||
name: "Add",
|
||||
props: ["closeBottomSheet"],
|
||||
data: () => {
|
||||
return {
|
||||
// 表单自动验证结果 false为验证通过
|
||||
valid: true,
|
||||
// 标题
|
||||
title: "",
|
||||
// 内容
|
||||
content: "",
|
||||
// 地区
|
||||
total_addr: "长理东区",
|
||||
// 详细地址
|
||||
detail_addr: "",
|
||||
// 联系方式
|
||||
contact_content: "",
|
||||
// 信息类型
|
||||
good_type: "found",
|
||||
// 上传图片
|
||||
upload_file: null,
|
||||
// 上传加载
|
||||
loading_switch: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["bg_img_url"])
|
||||
},
|
||||
methods: {
|
||||
init() {},
|
||||
// 触发验证
|
||||
validate() {
|
||||
this.$refs.form.validate();
|
||||
},
|
||||
// 重置整个表单
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
// 隐藏错误显示
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
},
|
||||
// 关闭本页
|
||||
close() {
|
||||
this.$refs.form.reset();
|
||||
this.closeBottomSheet()
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
mounted() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
25
src/views/Home/children/Card.vue
Normal file
25
src/views/Home/children/Card.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<v-col cols="6" xs="6" sm="6" md="4" lg="3">
|
||||
<v-card class="ma-2" raised>
|
||||
<v-img
|
||||
:src="content.img_url"
|
||||
gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
|
||||
:aspect-ratio="16/9"
|
||||
></v-img>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<p class="subtitle-2">{{content.title}}</p>
|
||||
<div class="caption">{{content.total_addr}} {{content.create_time}}</div>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Card",
|
||||
props: ["content"]
|
||||
};
|
||||
</script>
|
||||
5
vue.config.js
Normal file
5
vue.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
"transpileDependencies": [
|
||||
"vuetify"
|
||||
]
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user