修改前端
This commit is contained in:
橙子
@@ -1517,6 +1517,11 @@
|
|||||||
"supports-color": "^5.3.0"
|
"supports-color": "^5.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"chartist": {
|
||||||
|
"version": "0.11.4",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/chartist/download/chartist-0.11.4.tgz",
|
||||||
|
"integrity": "sha1-6W4cVz2LZ0eJIKOmrlI1nZ/I2Lc="
|
||||||
|
},
|
||||||
"check-types": {
|
"check-types": {
|
||||||
"version": "8.0.3",
|
"version": "8.0.3",
|
||||||
"resolved": "https://registry.npm.taobao.org/check-types/download/check-types-8.0.3.tgz",
|
"resolved": "https://registry.npm.taobao.org/check-types/download/check-types-8.0.3.tgz",
|
||||||
@@ -8814,6 +8819,14 @@
|
|||||||
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
"resolved": "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz",
|
||||||
"integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
|
"integrity": "sha1-5RqlJQJQ1Wmj+606ilpofWA24jU="
|
||||||
},
|
},
|
||||||
|
"vue-chartist": {
|
||||||
|
"version": "2.3.1",
|
||||||
|
"resolved": "https://registry.npm.taobao.org/vue-chartist/download/vue-chartist-2.3.1.tgz",
|
||||||
|
"integrity": "sha1-dDlL7E2Dg8UjeAPlTC735/P69IQ=",
|
||||||
|
"requires": {
|
||||||
|
"chartist": "^0.11.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-cli-plugin-vuetify": {
|
"vue-cli-plugin-vuetify": {
|
||||||
"version": "2.4.2",
|
"version": "2.4.2",
|
||||||
"resolved": "https://registry.nlark.com/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.4.2.tgz",
|
"resolved": "https://registry.nlark.com/vue-cli-plugin-vuetify/download/vue-cli-plugin-vuetify-2.4.2.tgz",
|
||||||
@@ -9,6 +9,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"axios": "^0.22.0",
|
"axios": "^0.22.0",
|
||||||
"vue": "^2.6.11",
|
"vue": "^2.6.11",
|
||||||
|
"vue-chartist": "^2.3.1",
|
||||||
"vue-router": "^3.2.0",
|
"vue-router": "^3.2.0",
|
||||||
"vuetify": "^2.4.0"
|
"vuetify": "^2.4.0"
|
||||||
},
|
},
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 4.2 KiB |
@@ -1,19 +1,22 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title>Yi-Vue</title>
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
<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">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
|
||||||
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<strong>We're sorry but Yi-Vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
</noscript>
|
</noscript>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
23
Yi.Vue/src/App.vue
Normal file
23
Yi.Vue/src/App.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
<v-fade-transition mode="out-in">
|
||||||
|
<router-view />
|
||||||
|
</v-fade-transition>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Styles
|
||||||
|
import '@/styles/overrides.sass'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
metaInfo: {
|
||||||
|
title: 'App',
|
||||||
|
titleTemplate: '%s | Material Dashboard Free',
|
||||||
|
htmlAttrs: { lang: 'en' },
|
||||||
|
meta: [
|
||||||
|
{ charset: 'utf-8' },
|
||||||
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
BIN
Yi.Vue/src/assets/clint-mckoy.jpg
Normal file
BIN
Yi.Vue/src/assets/clint-mckoy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
Yi.Vue/src/assets/lock.jpg
Normal file
BIN
Yi.Vue/src/assets/lock.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
BIN
Yi.Vue/src/assets/login.jpg
Normal file
BIN
Yi.Vue/src/assets/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 539 B After Width: | Height: | Size: 539 B |
BIN
Yi.Vue/src/assets/pricing.jpg
Normal file
BIN
Yi.Vue/src/assets/pricing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
Yi.Vue/src/assets/register.jpg
Normal file
BIN
Yi.Vue/src/assets/register.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
30
Yi.Vue/src/assets/vmd.svg
Normal file
30
Yi.Vue/src/assets/vmd.svg
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.472 205L182.534 118.292L162.162 130.093V119.162L191.975 102.019L221.665 50.5903L132.472 102.019V205Z" fill="#AEDDFF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.714 123.386L162.162 130.094V124.255V119.162V113.448L189.863 97.423L214.584 54.5659L132.472 102.019V194.938Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M183.155 101.274L189.987 97.2988L214.707 54.5659L175.329 77.2988C176.447 85.8702 179.18 93.9447 183.155 101.274Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.839 123.385L162.162 130.093V124.255V123.634C151.23 125.497 141.168 129.845 132.472 135.932V194.938Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 156.553V178.043C134.584 180.279 136.447 182.515 138.311 184.876L145.888 171.832C141.913 166.242 137.441 161.149 132.472 156.553Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 146.242C139.056 151.584 145.019 157.671 150.112 164.379L166.137 136.677C156.323 127.236 145.019 119.286 132.472 113.447V146.242Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M160.299 85.9946L141.665 96.8021C151.23 101.647 161.665 105.249 172.472 107.485L189.988 97.4232L195.205 88.3549C191.727 88.7275 188.249 88.8518 184.771 88.8518C176.323 88.8518 168.125 87.858 160.299 85.9946Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M170.609 80.0311C175.206 80.6522 179.926 81.0249 184.771 81.0249C189.988 81.0249 195.081 80.6522 200.05 79.7826L212.1 58.9131C208.87 60.0311 205.516 61.0249 202.038 61.7702L170.609 80.0311Z" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.714 123.385L171.975 124.379L132.472 192.826" fill="#AEDDFF"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M189.117 96.5534L161.043 112.827L162.161 119.162V113.448L189.863 97.423L214.583 54.5659L212.72 55.6839L189.117 96.5534Z" fill="#AEDDFF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.528 205V102.019L34.3359 50.5903L84.398 137.298V113.696L93.8389 119.162V153.572L123.528 205Z" fill="#7BC6FF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.528 194.937V102.018L43.0308 55.5586L84.3972 127.235V113.695V107.981L93.8381 113.447V119.161V143.509L123.528 194.937Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M123.528 194.937V144.006C116.82 150.714 111.478 158.788 107.875 167.733L123.528 194.937Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M60.5463 85.9933C68.2481 84.5026 75.4531 81.894 82.0369 78.1673L43.0308 55.5586L60.5463 85.9933Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M69.7397 101.895L82.5348 124.006C83.1559 124.131 83.777 124.255 84.3981 124.379V113.82V107.982L93.8391 113.447V119.286V126.367C104.522 129.224 114.46 133.696 123.528 139.534V109.472C109.864 104.379 95.0813 101.522 79.5534 101.522C76.1994 101.522 72.9696 101.646 69.7397 101.895Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M93.8384 143.509L100.671 155.31C108.994 158.912 116.695 163.633 123.528 169.223V148.85C114.584 142.515 104.646 137.546 93.8384 134.44V143.509Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M84.3973 114.939V113.696V107.982L93.8383 113.448V119.162V120.404L94.8321 112.827L83.2793 106.119L84.3973 114.939Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M43.0308 55.5586L84.3972 127.235V125.124L44.8941 56.6766L43.0308 55.5586Z" fill="#7BC6FF"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M123.528 192.826L93.8384 141.398V143.51L123.528 194.938" fill="#7BC6FF"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.948 60.3699L128.124 64.8994L103.418 50.5903H54.2114L128.124 93.2086L202.037 50.5903H119.065L135.948 60.3699Z" fill="#1867C0"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.065 57.8993L135.947 60.3699L128.124 64.8994L103.418 50.5903H62.5493L128.124 88.4732L193.698 50.5903H127.3L140.065 57.8993Z" fill="#1867C0"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M167.036 66.0317L193.698 50.5903H170.33C168.58 55.4286 167.448 60.6787 167.036 66.0317Z" fill="#1867C0"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M62.5493 50.5903L100.432 72.4142C105.579 67.7817 110.006 62.3258 113.3 56.2522L103.418 50.5903H62.5493Z" fill="#1867C0"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M102.903 50.5903H94.1533C101.977 65.517 113.301 78.2819 127.095 87.8555L128.124 88.4732L140.272 81.4731C125.036 74.8848 112.168 64.0758 102.903 50.5903Z" fill="#1867C0"/>
|
||||||
|
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M128.125 64.8994L118.86 59.5464C126.889 67.37 136.566 73.4436 147.375 77.3555L163.434 68.0906C153.654 67.1641 144.39 64.4876 135.948 60.3699L128.125 64.8994Z" fill="#1867C0"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M127.301 50.5903L140.066 57.8993L135.948 60.3699L135.021 60.8846L141.816 57.8993L129.051 50.5903H127.301Z" fill="#1867C0"/>
|
||||||
|
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M128.124 87.4438L64.2993 50.5903H62.5493L128.124 88.4732L193.698 50.5903H191.948L128.124 87.4438Z" fill="#1867C0"/>
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.037 66.0317L163.331 68.0906L147.375 77.3554L140.272 81.4731L128.125 88.4732V93.2086L202.038 50.5903H193.699L167.037 66.0317Z" fill="#1867C0"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.6 KiB |
1
Yi.Vue/src/assets/vuetify.svg
Normal file
1
Yi.Vue/src/assets/vuetify.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:#aeddff;}</style></defs><title>Artboard 47</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-2" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-3" 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: 518 B |
68
Yi.Vue/src/components/Links.vue
Normal file
68
Yi.Vue/src/components/Links.vue
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<v-container>
|
||||||
|
<v-row align="center">
|
||||||
|
<v-col
|
||||||
|
v-for="(link, i) in links"
|
||||||
|
:key="i"
|
||||||
|
class="text-center"
|
||||||
|
cols="6"
|
||||||
|
md="auto"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
:href="link.href"
|
||||||
|
class="text-decoration-none text-uppercase text-caption font-weight-regular"
|
||||||
|
rel="noopener"
|
||||||
|
target="_blank"
|
||||||
|
v-text="link.text"
|
||||||
|
/>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-spacer class="hidden-sm-and-down" />
|
||||||
|
|
||||||
|
<v-col
|
||||||
|
cols="12"
|
||||||
|
md="auto"
|
||||||
|
>
|
||||||
|
<div class="text-body-1 font-weight-light pt-6 pt-md-0 text-center">
|
||||||
|
© {{ (new Date()).getFullYear() }}, Made by <v-icon>mdi-vuetify</v-icon>
|
||||||
|
<a
|
||||||
|
href="https://vuetifyjs.com/en/about/meet-the-team/#company"
|
||||||
|
class="text-decoration-none"
|
||||||
|
>Vuetify</a>
|
||||||
|
</div>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Links',
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
links: [
|
||||||
|
{
|
||||||
|
href: 'https://vuetifyjs.com/',
|
||||||
|
text: 'Vuetify Docs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '#',
|
||||||
|
text: 'About Us',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '#',
|
||||||
|
text: 'Blog',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
href: '#',
|
||||||
|
text: 'Licenses',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass" scoped>
|
||||||
|
a
|
||||||
|
color: inherit !important
|
||||||
|
</style>
|
||||||
59
Yi.Vue/src/components/MaterialAlert.vue
Normal file
59
Yi.Vue/src/components/MaterialAlert.vue
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<v-alert
|
||||||
|
class="v-alert--material"
|
||||||
|
dark
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-if="$attrs.icon"
|
||||||
|
v-slot:prepend
|
||||||
|
>
|
||||||
|
<v-avatar
|
||||||
|
class="align-self-start mt-n9 elevation-6 mr-4"
|
||||||
|
size="38"
|
||||||
|
>
|
||||||
|
<v-icon
|
||||||
|
:color="$attrs.color"
|
||||||
|
class="elevation-6 white"
|
||||||
|
light
|
||||||
|
>
|
||||||
|
{{ $attrs.icon }}
|
||||||
|
</v-icon>
|
||||||
|
</v-avatar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<template
|
||||||
|
v-if="$attrs.dismissible"
|
||||||
|
v-slot:close="{ toggle }"
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
:aria-label="$vuetify.lang.t('$vuetify.close')"
|
||||||
|
class="ml-4"
|
||||||
|
color
|
||||||
|
icon
|
||||||
|
small
|
||||||
|
@click="toggle"
|
||||||
|
>
|
||||||
|
<v-icon>
|
||||||
|
$vuetify.icons.cancel
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-alert>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default { name: 'MaterialAlert' }
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.v-alert--material
|
||||||
|
margin-top: 32px
|
||||||
|
|
||||||
|
.v-alert__dismissible
|
||||||
|
align-self: flex-start
|
||||||
|
margin: 0 0 0 16px !important
|
||||||
|
</style>
|
||||||
113
Yi.Vue/src/components/MaterialCard.vue
Normal file
113
Yi.Vue/src/components/MaterialCard.vue
Normal file
@@ -0,0 +1,113 @@
|
|||||||
|
<template>
|
||||||
|
<app-card
|
||||||
|
v-bind="$attrs"
|
||||||
|
class="v-card--material mt-4"
|
||||||
|
>
|
||||||
|
<v-card-title class="align-start">
|
||||||
|
<v-sheet
|
||||||
|
:color="color"
|
||||||
|
:width="fullHeader ? '100%' : undefined"
|
||||||
|
class="overflow-hidden mt-n9 transition-swing v-card--material__sheet"
|
||||||
|
elevation="6"
|
||||||
|
max-width="100%"
|
||||||
|
rounded
|
||||||
|
>
|
||||||
|
<v-theme-provider
|
||||||
|
v-if="hasHeading"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="icon"
|
||||||
|
:class="iconSmall ? 'pa-7' : 'pa-8'"
|
||||||
|
>
|
||||||
|
<v-icon
|
||||||
|
:large="!iconSmall"
|
||||||
|
v-text="icon"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<slot name="heading" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="heading"
|
||||||
|
class="text-h4 white--text pa-7 v-card--material__title"
|
||||||
|
>
|
||||||
|
{{ heading }}
|
||||||
|
</div>
|
||||||
|
</v-theme-provider>
|
||||||
|
</v-sheet>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="hasTitle"
|
||||||
|
:class="fullHeader ? 'pt-4' : 'pl-3'"
|
||||||
|
class="text-h4 v-card--material__title"
|
||||||
|
>
|
||||||
|
<slot name="title" />
|
||||||
|
|
||||||
|
<template v-if="title">
|
||||||
|
{{ title }}
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="text-subtitle-1 mb-n4">
|
||||||
|
<slot name="subtitle" />
|
||||||
|
|
||||||
|
<template v-if="subtitle">
|
||||||
|
{{ subtitle }}
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</v-card-title>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<template v-if="$slots.actions">
|
||||||
|
<v-divider class="mt-2 mx-4" />
|
||||||
|
|
||||||
|
<v-card-actions class="px-4 text-caption grey--text">
|
||||||
|
<slot name="actions" />
|
||||||
|
</v-card-actions>
|
||||||
|
</template>
|
||||||
|
</app-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MaterialCard',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
color: String,
|
||||||
|
fullHeader: Boolean,
|
||||||
|
heading: String,
|
||||||
|
icon: String,
|
||||||
|
iconSmall: Boolean,
|
||||||
|
subtitle: String,
|
||||||
|
title: String,
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
hasHeading () {
|
||||||
|
return !!(
|
||||||
|
this.icon ||
|
||||||
|
this.heading ||
|
||||||
|
this.$slots.heading
|
||||||
|
)
|
||||||
|
},
|
||||||
|
hasTitle () {
|
||||||
|
return !!(
|
||||||
|
this.title ||
|
||||||
|
this.subtitle ||
|
||||||
|
this.$slots.title ||
|
||||||
|
this.$slots.subtitle
|
||||||
|
)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.v-card.v-card--material
|
||||||
|
> .v-card__title
|
||||||
|
> .v-card--material__title
|
||||||
|
flex: 1 1 auto
|
||||||
|
word-break: break-word
|
||||||
|
</style>
|
||||||
93
Yi.Vue/src/components/MaterialChartCard.vue
Normal file
93
Yi.Vue/src/components/MaterialChartCard.vue
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<material-card
|
||||||
|
v-bind="$attrs"
|
||||||
|
class="v-card--material-chart"
|
||||||
|
full-header
|
||||||
|
>
|
||||||
|
<template #heading>
|
||||||
|
<div class="pa-4">
|
||||||
|
<chartist
|
||||||
|
:data="data"
|
||||||
|
:event-handlers="eventHandlers"
|
||||||
|
:options="options"
|
||||||
|
:ratio="ratio"
|
||||||
|
:responsive-options="responsiveOptions"
|
||||||
|
:type="type"
|
||||||
|
style="max-height: 150px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #subtitle>
|
||||||
|
<slot name="subtitle" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<template #actions>
|
||||||
|
<slot name="actions" />
|
||||||
|
</template>
|
||||||
|
</material-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MaterialChartCard',
|
||||||
|
|
||||||
|
inheritAttrs: false,
|
||||||
|
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
eventHandlers: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ([]),
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
ratio: String,
|
||||||
|
responsiveOptions: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ([]),
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
validator: v => ['Bar', 'Line', 'Pie'].includes(v),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.v-card--material-chart
|
||||||
|
p
|
||||||
|
color: #999
|
||||||
|
|
||||||
|
.v-card--material__sheet
|
||||||
|
max-height: 185px
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
.ct-label
|
||||||
|
color: rgba(255, 255, 255, 1)
|
||||||
|
opacity: .7
|
||||||
|
font-size: 0.875rem
|
||||||
|
font-weight: 300
|
||||||
|
|
||||||
|
.ct-grid
|
||||||
|
stroke: hsla(0,0%,100%,.2)
|
||||||
|
|
||||||
|
.ct-series-a .ct-point,
|
||||||
|
.ct-series-a .ct-line,
|
||||||
|
.ct-series-a .ct-bar,
|
||||||
|
.ct-series-a .ct-slice-donut
|
||||||
|
stroke: rgba(255,255,255,.8)
|
||||||
|
|
||||||
|
.ct-series-a .ct-slice-pie,
|
||||||
|
.ct-series-a .ct-area
|
||||||
|
fill: rgba(255,255,255,.4)
|
||||||
|
</style>
|
||||||
78
Yi.Vue/src/components/MaterialSnackbar.vue
Normal file
78
Yi.Vue/src/components/MaterialSnackbar.vue
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
<template>
|
||||||
|
<v-snackbar
|
||||||
|
v-model="internalValue"
|
||||||
|
class="v-snackbar--material"
|
||||||
|
v-bind="{
|
||||||
|
...$attrs,
|
||||||
|
'color': 'transparent'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<material-alert
|
||||||
|
v-model="internalValue"
|
||||||
|
:color="$attrs.color"
|
||||||
|
:dismissible="dismissible"
|
||||||
|
:type="type"
|
||||||
|
class="ma-0"
|
||||||
|
dark
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</material-alert>
|
||||||
|
</v-snackbar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MaterialSnackbar',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
dismissible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
value: Boolean,
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
internalValue: this.value,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
internalValue (val, oldVal) {
|
||||||
|
if (val === oldVal) return
|
||||||
|
|
||||||
|
this.$emit('input', val)
|
||||||
|
},
|
||||||
|
value (val, oldVal) {
|
||||||
|
if (val === oldVal) return
|
||||||
|
|
||||||
|
this.internalValue = val
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.v-snackbar--material
|
||||||
|
margin-top: 32px
|
||||||
|
margin-bottom: 32px
|
||||||
|
|
||||||
|
.v-alert
|
||||||
|
padding: 32px 16px
|
||||||
|
|
||||||
|
.v-alert--material,
|
||||||
|
.v-snack__wrapper
|
||||||
|
border-radius: 4px
|
||||||
|
|
||||||
|
.v-snack__content
|
||||||
|
overflow: visible
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
.v-snack__action
|
||||||
|
display: none
|
||||||
|
</style>
|
||||||
39
Yi.Vue/src/components/MaterialStatsCard.vue
Normal file
39
Yi.Vue/src/components/MaterialStatsCard.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<material-card
|
||||||
|
class="v-card--material-stats"
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<template #subtitle>
|
||||||
|
<div
|
||||||
|
class="text-right text-h3 v-card__subtitle--material-stats"
|
||||||
|
v-text="value"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #actions>
|
||||||
|
<slot name="actions" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
</material-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MaterialStatCard',
|
||||||
|
|
||||||
|
props: { value: String },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.v-card--material-stats.v-card--material .v-card--material__title
|
||||||
|
color: #999999
|
||||||
|
font-size: .875rem !important
|
||||||
|
margin-left: auto
|
||||||
|
text-align: right
|
||||||
|
|
||||||
|
.v-card__subtitle--material-stats
|
||||||
|
color: #3C4858
|
||||||
|
</style>
|
||||||
@@ -102,6 +102,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import itemApi from './TableApi.js'
|
import itemApi from './TableApi.js'
|
||||||
export default {
|
export default {
|
||||||
|
name: 'Tables',
|
||||||
props: {
|
props: {
|
||||||
defaultItem: {
|
defaultItem: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import myaxios from '@/utils/myaxios'
|
import myaxios from '@/util/myaxios'
|
||||||
export default {
|
export default {
|
||||||
getItem(url) {
|
getItem(url) {
|
||||||
return myaxios({
|
return myaxios({
|
||||||
37
Yi.Vue/src/components/ViewIntro.vue
Normal file
37
Yi.Vue/src/components/ViewIntro.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<template>
|
||||||
|
<section class="mb-12 text-center">
|
||||||
|
<h1
|
||||||
|
class="mb-2 text-h3"
|
||||||
|
v-text="heading"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-if="link"
|
||||||
|
class="text-body-2 font-weight-light"
|
||||||
|
>
|
||||||
|
Please checkout the <a
|
||||||
|
:href="`https://vuetifyjs.com/en/${link}`"
|
||||||
|
class="text-decoration-none secondary--text"
|
||||||
|
target="_blank"
|
||||||
|
>full documentation</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<v-responsive
|
||||||
|
class="text-center mx-auto text-body-1 font-weight-light"
|
||||||
|
max-width="400"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</v-responsive>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'ViewIntro',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
heading: String,
|
||||||
|
link: String,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
29
Yi.Vue/src/components/app/BarItem.vue
Normal file
29
Yi.Vue/src/components/app/BarItem.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<script>
|
||||||
|
import { VHover, VListItem } from 'vuetify/lib'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppBarItem',
|
||||||
|
|
||||||
|
render (h) {
|
||||||
|
return h(VHover, {
|
||||||
|
scopedSlots: {
|
||||||
|
default: ({ hover }) => {
|
||||||
|
return h(VListItem, {
|
||||||
|
attrs: this.$attrs,
|
||||||
|
class: {
|
||||||
|
'black--text': !hover,
|
||||||
|
'white--text secondary elevation-12': hover,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
activeClass: '',
|
||||||
|
dark: hover,
|
||||||
|
link: true,
|
||||||
|
...this.$attrs,
|
||||||
|
},
|
||||||
|
}, this.$slots.default)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
22
Yi.Vue/src/components/app/Btn.vue
Normal file
22
Yi.Vue/src/components/app/Btn.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<v-btn
|
||||||
|
:color="color"
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppBtn',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
12
Yi.Vue/src/components/app/Card.vue
Normal file
12
Yi.Vue/src/components/app/Card.vue
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<template>
|
||||||
|
<v-card
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default { name: 'AppCard' }
|
||||||
|
</script>
|
||||||
42
Yi.Vue/src/components/app/Tabs.vue
Normal file
42
Yi.Vue/src/components/app/Tabs.vue
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<v-tabs
|
||||||
|
:active-class="`${color} ${theme.isDark ? 'black' : 'white'}--text`"
|
||||||
|
class="v-tabs--pill"
|
||||||
|
hide-slider
|
||||||
|
v-bind="$attrs"
|
||||||
|
v-on="$listeners"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<slot name="items" />
|
||||||
|
</v-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppTabs',
|
||||||
|
|
||||||
|
inject: ['theme'],
|
||||||
|
|
||||||
|
props: {
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: 'primary',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.v-tabs--pill
|
||||||
|
.v-tab,
|
||||||
|
.v-tab:before
|
||||||
|
border-radius: 24px
|
||||||
|
|
||||||
|
&.v-tabs--icons-and-text
|
||||||
|
&:not(.v-tabs--vertical) > .v-tabs-bar
|
||||||
|
height: 100px
|
||||||
|
.v-tab,
|
||||||
|
.v-tab:before
|
||||||
|
border-radius: 4px
|
||||||
|
</style>
|
||||||
79
Yi.Vue/src/layouts/default/AppBar.vue
Normal file
79
Yi.Vue/src/layouts/default/AppBar.vue
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<v-app-bar
|
||||||
|
id="default-app-bar"
|
||||||
|
app
|
||||||
|
absolute
|
||||||
|
class="v-bar--underline"
|
||||||
|
color="transparent"
|
||||||
|
:clipped-left="$vuetify.rtl"
|
||||||
|
:clipped-right="!$vuetify.rtl"
|
||||||
|
height="70"
|
||||||
|
flat
|
||||||
|
>
|
||||||
|
<v-app-bar-nav-icon
|
||||||
|
class="hidden-md-and-up"
|
||||||
|
@click="drawer = !drawer"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<default-drawer-toggle class="hidden-sm-and-down" />
|
||||||
|
|
||||||
|
<v-toolbar-title
|
||||||
|
class="font-weight-light text-h5"
|
||||||
|
v-text="name"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<v-spacer />
|
||||||
|
|
||||||
|
<default-search class="hidden-sm-and-down" />
|
||||||
|
|
||||||
|
<default-go-home />
|
||||||
|
|
||||||
|
<default-notifications />
|
||||||
|
|
||||||
|
<default-account />
|
||||||
|
</v-app-bar>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Utilities
|
||||||
|
// import { get, sync } from 'vuex-pathify'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data:()=>({
|
||||||
|
drawer:true,
|
||||||
|
name:"测试系统"
|
||||||
|
}),
|
||||||
|
name: 'DefaultBar',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
DefaultAccount: () => import(
|
||||||
|
/* webpackChunkName: "default-account" */
|
||||||
|
'./widgets/Account'
|
||||||
|
),
|
||||||
|
DefaultDrawerToggle: () => import(
|
||||||
|
/* webpackChunkName: "default-drawer-toggle" */
|
||||||
|
'./widgets/DrawerToggle'
|
||||||
|
),
|
||||||
|
DefaultGoHome: () => import(
|
||||||
|
/* webpackChunkName: "default-go-home" */
|
||||||
|
'./widgets/GoHome'
|
||||||
|
),
|
||||||
|
DefaultNotifications: () => import(
|
||||||
|
/* webpackChunkName: "default-notifications" */
|
||||||
|
'./widgets/Notifications'
|
||||||
|
),
|
||||||
|
DefaultSearch: () => import(
|
||||||
|
/* webpackChunkName: "default-search" */
|
||||||
|
'./widgets/Search'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
|
// computed: {
|
||||||
|
// ...sync('app', [
|
||||||
|
// 'drawer',
|
||||||
|
// 'mini',
|
||||||
|
// ]),
|
||||||
|
// name: get('route/name'),
|
||||||
|
// },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
170
Yi.Vue/src/layouts/default/Drawer.vue
Normal file
170
Yi.Vue/src/layouts/default/Drawer.vue
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<v-navigation-drawer
|
||||||
|
id="default-drawer"
|
||||||
|
v-model="drawer"
|
||||||
|
:dark="dark"
|
||||||
|
:right="$vuetify.rtl"
|
||||||
|
:src="drawerImage ? image : ''"
|
||||||
|
:mini-variant.sync="mini"
|
||||||
|
mini-variant-width="80"
|
||||||
|
app
|
||||||
|
width="260"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-if="drawerImage"
|
||||||
|
#img="props"
|
||||||
|
>
|
||||||
|
<v-img
|
||||||
|
:key="image"
|
||||||
|
:gradient="gradient"
|
||||||
|
v-bind="props"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="px-2">
|
||||||
|
<default-drawer-header />
|
||||||
|
|
||||||
|
<v-divider class="mx-3 mb-2" />
|
||||||
|
|
||||||
|
<default-list :items="items" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template #append>
|
||||||
|
<div class="pa-4 text-center">
|
||||||
|
<app-btn
|
||||||
|
class="text-none mb-4"
|
||||||
|
color="white"
|
||||||
|
href="https://vuetifyjs.com"
|
||||||
|
small
|
||||||
|
text
|
||||||
|
>
|
||||||
|
Documentation
|
||||||
|
</app-btn>
|
||||||
|
|
||||||
|
<app-btn
|
||||||
|
block
|
||||||
|
class="text-none"
|
||||||
|
color="secondary"
|
||||||
|
href="https://store.vuetifyjs.com/products/vuetify-material-dashboard-pro"
|
||||||
|
>
|
||||||
|
<v-icon left>
|
||||||
|
mdi-package-up
|
||||||
|
</v-icon>
|
||||||
|
|
||||||
|
Upgrade to Pro
|
||||||
|
</app-btn>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="pt-12" />
|
||||||
|
</v-navigation-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Utilities
|
||||||
|
// import { get, sync } from 'vuex-pathify'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data:()=>({
|
||||||
|
gradient: [
|
||||||
|
'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
|
||||||
|
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
|
||||||
|
'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
|
||||||
|
],
|
||||||
|
images: [
|
||||||
|
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-1.jpg',
|
||||||
|
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-2.jpg',
|
||||||
|
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-3.jpg',
|
||||||
|
'https://demos.creative-tim.com/material-dashboard-pro/assets/img/sidebar-4.jpg',
|
||||||
|
],
|
||||||
|
dark:null,
|
||||||
|
mini: false,
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: "Dashboard",
|
||||||
|
icon: "mdi-view-dashboard",
|
||||||
|
to: "/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "User Profile",
|
||||||
|
icon: "mdi-account",
|
||||||
|
to: "/components/profile/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Regular Tables",
|
||||||
|
icon: "mdi-clipboard-outline",
|
||||||
|
to: "/tables/regular/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Typography",
|
||||||
|
icon: "mdi-format-font",
|
||||||
|
to: "/components/typography/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Icons",
|
||||||
|
icon: "mdi-chart-bubble",
|
||||||
|
to: "/components/icons/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Google Maps",
|
||||||
|
icon: "mdi-map-marker",
|
||||||
|
to: "/maps/google/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Notifications",
|
||||||
|
icon: "mdi-bell",
|
||||||
|
to: "/components/notifications/",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
name: 'DefaultDrawer',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
DefaultDrawerHeader: () => import(
|
||||||
|
/* webpackChunkName: "default-drawer-header" */
|
||||||
|
'./widgets/DrawerHeader'
|
||||||
|
),
|
||||||
|
DefaultList: () => import(
|
||||||
|
/* webpackChunkName: "default-list" */
|
||||||
|
'./List'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
|
// computed: {
|
||||||
|
// ...get('user', [
|
||||||
|
// 'dark',
|
||||||
|
// 'gradient',
|
||||||
|
// 'image',
|
||||||
|
// ]),
|
||||||
|
// ...get('app', [
|
||||||
|
// 'items',
|
||||||
|
// 'version',
|
||||||
|
// ]),
|
||||||
|
// ...sync('app', [
|
||||||
|
// 'drawer',
|
||||||
|
// 'drawerImage',
|
||||||
|
// 'mini',
|
||||||
|
// ]),
|
||||||
|
// },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
#default-drawer
|
||||||
|
.v-list-item
|
||||||
|
margin-bottom: 8px
|
||||||
|
|
||||||
|
.v-list-item::before,
|
||||||
|
.v-list-item::after
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.v-list-group__header__prepend-icon,
|
||||||
|
.v-list-item__icon
|
||||||
|
margin-top: 12px
|
||||||
|
margin-bottom: 12px
|
||||||
|
margin-left: 4px
|
||||||
|
|
||||||
|
&.v-navigation-drawer--mini-variant
|
||||||
|
.v-list-item
|
||||||
|
justify-content: flex-start !important
|
||||||
|
</style>
|
||||||
22
Yi.Vue/src/layouts/default/Footer.vue
Normal file
22
Yi.Vue/src/layouts/default/Footer.vue
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<v-footer
|
||||||
|
id="default-footer"
|
||||||
|
color="transparent"
|
||||||
|
absolute
|
||||||
|
app
|
||||||
|
inset
|
||||||
|
>
|
||||||
|
<links />
|
||||||
|
</v-footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Components
|
||||||
|
import Links from '@/components/Links'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DefaultFooter',
|
||||||
|
|
||||||
|
components: { Links },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
42
Yi.Vue/src/layouts/default/Index.vue
Normal file
42
Yi.Vue/src/layouts/default/Index.vue
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<default-bar />
|
||||||
|
|
||||||
|
<default-drawer />
|
||||||
|
|
||||||
|
<default-view />
|
||||||
|
|
||||||
|
<default-footer />
|
||||||
|
|
||||||
|
<!-- <default-settings /> -->
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultLayout',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
DefaultBar: () => import(
|
||||||
|
/* webpackChunkName: "default-app-bar" */
|
||||||
|
'./AppBar'
|
||||||
|
),
|
||||||
|
DefaultDrawer: () => import(
|
||||||
|
/* webpackChunkName: "default-drawer" */
|
||||||
|
'./Drawer'
|
||||||
|
),
|
||||||
|
DefaultFooter: () => import(
|
||||||
|
/* webpackChunkName: "default-footer" */
|
||||||
|
'./Footer'
|
||||||
|
),
|
||||||
|
// DefaultSettings: () => import(
|
||||||
|
// /* webpackChunkName: "default-settings" */
|
||||||
|
// './Settings'
|
||||||
|
// ),
|
||||||
|
DefaultView: () => import(
|
||||||
|
/* webpackChunkName: "default-view" */
|
||||||
|
'./View'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -24,10 +24,12 @@
|
|||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'DefaultList',
|
name: 'DefaultList',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
DefaultListGroup: () => import('./ListGroup'),
|
DefaultListGroup: () => import('./ListGroup'),
|
||||||
DefaultListItem: () => import('./ListItem'),
|
DefaultListItem: () => import('./ListItem'),
|
||||||
},
|
},
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
items: {
|
items: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-list-group
|
<v-list-group
|
||||||
|
|
||||||
|
|
||||||
:group="group"
|
|
||||||
:prepend-icon="item.icon"
|
:prepend-icon="item.icon"
|
||||||
eager
|
eager
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
@@ -42,6 +42,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
// Utilities
|
// Utilities
|
||||||
|
// import { get } from 'vuex-pathify'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'DefaultListGroup',
|
name: 'DefaultListGroup',
|
||||||
@@ -58,10 +59,10 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
// gradient: get('user/drawer@gradient'),
|
|
||||||
group () {
|
// group () {
|
||||||
return this.genGroup(this.item.items)
|
// return this.genGroup(this.item.items)
|
||||||
},
|
// },
|
||||||
title () {
|
title () {
|
||||||
const matches = this.item.title.match(/\b(\w)/g)
|
const matches = this.item.title.match(/\b(\w)/g)
|
||||||
|
|
||||||
13
Yi.Vue/src/layouts/default/View.vue
Normal file
13
Yi.Vue/src/layouts/default/View.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<v-main>
|
||||||
|
<v-container fluid>
|
||||||
|
<router-view :key="$route.path" />
|
||||||
|
</v-container>
|
||||||
|
</v-main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultView',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
59
Yi.Vue/src/layouts/default/widgets/Account.vue
Normal file
59
Yi.Vue/src/layouts/default/widgets/Account.vue
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<v-menu
|
||||||
|
bottom
|
||||||
|
left
|
||||||
|
min-width="200"
|
||||||
|
offset-y
|
||||||
|
origin="top right"
|
||||||
|
transition="scale-transition"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ attrs, on }">
|
||||||
|
<v-btn
|
||||||
|
class="ml-2"
|
||||||
|
min-width="0"
|
||||||
|
text
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-account</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-list
|
||||||
|
:tile="false"
|
||||||
|
flat
|
||||||
|
nav
|
||||||
|
>
|
||||||
|
<template v-for="(p, i) in profile">
|
||||||
|
<v-divider
|
||||||
|
v-if="p.divider"
|
||||||
|
:key="`divider-${i}`"
|
||||||
|
class="mb-2 mt-2"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<app-bar-item
|
||||||
|
v-else
|
||||||
|
:key="`item-${i}`"
|
||||||
|
to="/"
|
||||||
|
>
|
||||||
|
<v-list-item-title v-text="p.title" />
|
||||||
|
</app-bar-item>
|
||||||
|
</template>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultAccount',
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
profile: [
|
||||||
|
{ title: 'Profile' },
|
||||||
|
{ title: 'Settings' },
|
||||||
|
{ divider: true },
|
||||||
|
{ title: 'Log out' },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
</script>
|
||||||
39
Yi.Vue/src/layouts/default/widgets/AccountSettings.vue
Normal file
39
Yi.Vue/src/layouts/default/widgets/AccountSettings.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<default-list
|
||||||
|
:items="items"
|
||||||
|
class="mb-n2"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultAccountSettings',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
DefaultList: () => import(
|
||||||
|
/* webpackChunkName: "default-list" */
|
||||||
|
'../List'
|
||||||
|
),
|
||||||
|
},
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'John Leider',
|
||||||
|
icon: 'mdi-vuetify',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
title: 'My Profile',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Edit Profile',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Settings',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
</script>
|
||||||
29
Yi.Vue/src/layouts/default/widgets/DrawerHeader.vue
Normal file
29
Yi.Vue/src/layouts/default/widgets/DrawerHeader.vue
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<v-list-item class="mb-0 justify-space-between pl-3">
|
||||||
|
<v-list-item-avatar>
|
||||||
|
<v-img
|
||||||
|
:src="
|
||||||
|
require('@/assets/vmd.svg')"
|
||||||
|
/>
|
||||||
|
</v-list-item-avatar>
|
||||||
|
|
||||||
|
<v-list-item-content class="pl-2">
|
||||||
|
<v-list-item-title class="text-h3">
|
||||||
|
<strong class="mr-1 font-weight-black">VMD</strong>
|
||||||
|
|
||||||
|
<span class="primary--text">FREE</span>
|
||||||
|
</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Utilities
|
||||||
|
// import { get } from 'vuex-pathify'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DefaultDrawerHeader',
|
||||||
|
|
||||||
|
// computed: { version: get('app/version') },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
27
Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue
Normal file
27
Yi.Vue/src/layouts/default/widgets/DrawerToggle.vue
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<v-btn
|
||||||
|
class="ml-3 mr-4"
|
||||||
|
elevation="1"
|
||||||
|
fab
|
||||||
|
small
|
||||||
|
@click="mini = !mini"
|
||||||
|
>
|
||||||
|
<v-icon>
|
||||||
|
{{ mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
|
||||||
|
</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Utilities
|
||||||
|
// import { sync } from 'vuex-pathify'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'DefaultDrawerToggle',
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
// mini: sync('app/mini'),
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
17
Yi.Vue/src/layouts/default/widgets/GoHome.vue
Normal file
17
Yi.Vue/src/layouts/default/widgets/GoHome.vue
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<v-btn
|
||||||
|
class="ml-2"
|
||||||
|
min-width="0"
|
||||||
|
text
|
||||||
|
to="/"
|
||||||
|
exact
|
||||||
|
>
|
||||||
|
<v-icon>mdi-view-dashboard</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultGoHome',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
62
Yi.Vue/src/layouts/default/widgets/Notifications.vue
Normal file
62
Yi.Vue/src/layouts/default/widgets/Notifications.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<v-menu
|
||||||
|
bottom
|
||||||
|
left
|
||||||
|
offset-y
|
||||||
|
origin="top right"
|
||||||
|
transition="scale-transition"
|
||||||
|
>
|
||||||
|
<template v-slot:activator="{ attrs, on }">
|
||||||
|
<v-btn
|
||||||
|
class="ml-2"
|
||||||
|
min-width="0"
|
||||||
|
text
|
||||||
|
v-bind="attrs"
|
||||||
|
v-on="on"
|
||||||
|
>
|
||||||
|
<v-badge
|
||||||
|
bordered
|
||||||
|
color="red"
|
||||||
|
overlap
|
||||||
|
>
|
||||||
|
<template v-slot:badge>
|
||||||
|
<span>5</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-icon>mdi-bell</v-icon>
|
||||||
|
</v-badge>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-list
|
||||||
|
flat
|
||||||
|
nav
|
||||||
|
>
|
||||||
|
<app-bar-item
|
||||||
|
v-for="(n, i) in notifications"
|
||||||
|
:key="i"
|
||||||
|
link
|
||||||
|
>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title>{{ n }} </v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</app-bar-item>
|
||||||
|
</v-list>
|
||||||
|
</v-menu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultNotifications',
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
notifications: [
|
||||||
|
'Mike John Responded to your email',
|
||||||
|
'You have 5 new tasks',
|
||||||
|
'You\'re now friends with Andrew',
|
||||||
|
'Another Notification',
|
||||||
|
'Another one',
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
</script>
|
||||||
31
Yi.Vue/src/layouts/default/widgets/Search.vue
Normal file
31
Yi.Vue/src/layouts/default/widgets/Search.vue
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
<template>
|
||||||
|
<v-text-field
|
||||||
|
placeholder="Search"
|
||||||
|
class="mr-16"
|
||||||
|
color="secondary"
|
||||||
|
hide-details
|
||||||
|
style="max-width: 220px"
|
||||||
|
>
|
||||||
|
<template
|
||||||
|
v-if="$vuetify.breakpoint.mdAndUp"
|
||||||
|
v-slot:append-outer
|
||||||
|
>
|
||||||
|
<v-btn
|
||||||
|
class="mt-n2 ml-n2"
|
||||||
|
fab
|
||||||
|
small
|
||||||
|
elevation="2"
|
||||||
|
height="44"
|
||||||
|
width="44"
|
||||||
|
>
|
||||||
|
<v-icon>mdi-magnify</v-icon>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
</v-text-field>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DefaultSearch',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import vuetify from './plugins/vuetify'
|
import vuetify from './plugins/vuetify'
|
||||||
|
import './plugins'
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
20
Yi.Vue/src/plugins/app.js
Normal file
20
Yi.Vue/src/plugins/app.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* plugins/app.js
|
||||||
|
*
|
||||||
|
* Automatically loads and bootstraps files
|
||||||
|
* in the `./src/components/` folder.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Imports
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
const requireComponent = require.context('@/components', true, /\.vue$/)
|
||||||
|
|
||||||
|
for (const file of requireComponent.keys()) {
|
||||||
|
const componentConfig = requireComponent(file)
|
||||||
|
|
||||||
|
Vue.component(
|
||||||
|
componentConfig.default.name,
|
||||||
|
componentConfig.default || componentConfig,
|
||||||
|
)
|
||||||
|
}
|
||||||
4
Yi.Vue/src/plugins/chartist.js
Normal file
4
Yi.Vue/src/plugins/chartist.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import 'chartist/dist/chartist.min.css'
|
||||||
|
|
||||||
|
Vue.use(require('vue-chartist'))
|
||||||
6
Yi.Vue/src/plugins/index.js
Normal file
6
Yi.Vue/src/plugins/index.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
// Automatically included in './src/main.js'
|
||||||
|
|
||||||
|
import './app'
|
||||||
|
import './chartist'
|
||||||
|
// import './webfontloader'
|
||||||
|
// import './vue-meta'
|
||||||
30
Yi.Vue/src/plugins/vuetify.js
Normal file
30
Yi.Vue/src/plugins/vuetify.js
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
// Vuetify Documentation https://vuetifyjs.com
|
||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Vuetify from 'vuetify/lib/framework'
|
||||||
|
import ripple from 'vuetify/lib/directives/ripple'
|
||||||
|
|
||||||
|
Vue.use(Vuetify, { directives: { ripple } })
|
||||||
|
|
||||||
|
const theme = {
|
||||||
|
primary: '#E91E63',
|
||||||
|
secondary: '#9C27b0',
|
||||||
|
accent: '#e91e63',
|
||||||
|
info: '#00CAE3',
|
||||||
|
success: '#4CAF50',
|
||||||
|
warning: '#FB8C00',
|
||||||
|
error: '#FF5252',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default new Vuetify({
|
||||||
|
breakpoint: { mobileBreakpoint: 960 },
|
||||||
|
icons: {
|
||||||
|
values: { expand: 'mdi-menu-down' },
|
||||||
|
},
|
||||||
|
theme: {
|
||||||
|
themes: {
|
||||||
|
dark: theme,
|
||||||
|
light: theme,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
29
Yi.Vue/src/router/index.js
Normal file
29
Yi.Vue/src/router/index.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import { trailingSlash } from '@/util/helpers'
|
||||||
|
import {
|
||||||
|
layout,
|
||||||
|
route,
|
||||||
|
} from '@/util/routes'
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
scrollBehavior: (to, from, savedPosition) => {
|
||||||
|
if (to.hash) return { selector: to.hash }
|
||||||
|
if (savedPosition) return savedPosition
|
||||||
|
|
||||||
|
return { x: 0, y: 0 }
|
||||||
|
},
|
||||||
|
routes: [layout('Default', [
|
||||||
|
route('Dashboard'),
|
||||||
|
route('UserProfile', null, 'components/profile'),
|
||||||
|
])]
|
||||||
|
})
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
return to.path.endsWith('/') ? next() : next(trailingSlash(to.path))
|
||||||
|
})
|
||||||
|
export default router
|
||||||
26
Yi.Vue/src/styles/overrides.sass
Normal file
26
Yi.Vue/src/styles/overrides.sass
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
.text-mono
|
||||||
|
font-family: monospace
|
||||||
|
|
||||||
|
// Helpers
|
||||||
|
.flex-1-1-auto
|
||||||
|
flex: 1 1 auto !important
|
||||||
|
|
||||||
|
.flex-1-0-auto
|
||||||
|
flex: 1 0 auto !important
|
||||||
|
|
||||||
|
.flex-0-1-auto
|
||||||
|
flex: 0 1 auto !important
|
||||||
|
|
||||||
|
.flex-0-0-auto
|
||||||
|
flex: 0 0 auto !important
|
||||||
|
|
||||||
|
.position-relative
|
||||||
|
position: relative !important
|
||||||
|
|
||||||
|
.overflow-y-scroll
|
||||||
|
overflow-y: scroll
|
||||||
|
|
||||||
|
table
|
||||||
|
> thead > tr > th,
|
||||||
|
> tbody > tr > td
|
||||||
|
font-weight: 300 !important
|
||||||
106
Yi.Vue/src/styles/variables.scss
Normal file
106
Yi.Vue/src/styles/variables.scss
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
// reduce button default elevation
|
||||||
|
// default background color is #EEEEEE
|
||||||
|
|
||||||
|
$btn-sizes: (
|
||||||
|
'small': 28,
|
||||||
|
'default': 41,
|
||||||
|
'large': 54
|
||||||
|
);
|
||||||
|
|
||||||
|
$btn-font-sizes: (
|
||||||
|
'default': .75rem
|
||||||
|
);
|
||||||
|
|
||||||
|
$btn-font-weight: 400;
|
||||||
|
$btn-letter-spacing: normal;
|
||||||
|
$material-light: (
|
||||||
|
'background': #EEEEEE,
|
||||||
|
'text': (
|
||||||
|
'primary': #333333,
|
||||||
|
'secondary': #999999
|
||||||
|
)
|
||||||
|
);
|
||||||
|
$btn-icon-font-size: 1.0625rem !important;
|
||||||
|
|
||||||
|
$list-item-min-height: 48px;
|
||||||
|
|
||||||
|
$blockquote-font-size: 1.25rem;
|
||||||
|
|
||||||
|
$card-border-radius: 6px;
|
||||||
|
$card-text-font-weight: 300;
|
||||||
|
$card-elevation: 1;
|
||||||
|
|
||||||
|
$data-table-regular-header-font-size: 1.0625rem;
|
||||||
|
|
||||||
|
$shadow-key-umbra: (
|
||||||
|
1: (0 1px 4px 0 rgba(0,0,0,.14)),
|
||||||
|
12: (0 16px 38px -12px rgba(0,0,0,.56))
|
||||||
|
);
|
||||||
|
|
||||||
|
$shadow-key-penumbra: (
|
||||||
|
1: (0 0 0 0 rgba(0,0,0,0)),
|
||||||
|
12: (0 4px 25px 0 rgba(0,0,0,.12))
|
||||||
|
);
|
||||||
|
|
||||||
|
$shadow-key-ambient: (
|
||||||
|
1: (0 0 0 0 rgba(0,0,0,0)),
|
||||||
|
12: (0 8px 10px -5px rgba(0,0,0,.2))
|
||||||
|
);
|
||||||
|
|
||||||
|
$headings: (
|
||||||
|
'h1': (
|
||||||
|
'size': 3.3125rem,
|
||||||
|
'line-height': 1.15em,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'h2': (
|
||||||
|
'size': 2.25rem,
|
||||||
|
'line-height': 1.5em,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'h3': (
|
||||||
|
'size': 1.5625rem,
|
||||||
|
'line-height': 1.4em,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'h4': (
|
||||||
|
'size': 1.125rem,
|
||||||
|
'line-height': 1.4em,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'h5': (
|
||||||
|
'size': 1.0625rem,
|
||||||
|
'line-height': 1.4em,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'h6': (
|
||||||
|
'size': .75rem,
|
||||||
|
'line-height': 1.5em,
|
||||||
|
'text-transform': uppercase,
|
||||||
|
'weight': 500
|
||||||
|
),
|
||||||
|
'subtitle-1': (
|
||||||
|
'size': 0.875rem,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'subtitle-2': (
|
||||||
|
'size': 0.875rem,
|
||||||
|
'line-height': 1.5em !important,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'caption': (
|
||||||
|
'size': 0.8125rem,
|
||||||
|
'weight': 300
|
||||||
|
),
|
||||||
|
'overline': (
|
||||||
|
'letter-spacing': normal,
|
||||||
|
'line-height': 0.625rem,
|
||||||
|
'size': 0.625rem,
|
||||||
|
'weight': 500
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
// Tabs
|
||||||
|
$tab-font-size: .775rem;
|
||||||
|
$tab-font-weight: 500;
|
||||||
|
$tabs-item-letter-spacing: normal;
|
||||||
11
Yi.Vue/src/util/globals.js
Normal file
11
Yi.Vue/src/util/globals.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
const EN_LOCALE_ONLY = process.env.EN_LOCALE_ONLY === 'true'
|
||||||
|
const IN_BROWSER = typeof window !== 'undefined'
|
||||||
|
const IS_DEBUG = process.env.DEBUG === 'true'
|
||||||
|
const IS_PROD = process.env.NODE_ENV === 'production'
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
EN_LOCALE_ONLY,
|
||||||
|
IN_BROWSER,
|
||||||
|
IS_DEBUG,
|
||||||
|
IS_PROD,
|
||||||
|
}
|
||||||
11
Yi.Vue/src/util/helpers.js
Normal file
11
Yi.Vue/src/util/helpers.js
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
export function leadingSlash (str) {
|
||||||
|
return str.startsWith('/') ? str : '/' + str
|
||||||
|
}
|
||||||
|
|
||||||
|
export function trailingSlash (str) {
|
||||||
|
return str.endsWith('/') ? str : str + '/'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const wait = timeout => {
|
||||||
|
return new Promise(resolve => setTimeout(resolve, timeout))
|
||||||
|
}
|
||||||
@@ -25,12 +25,12 @@ myaxios.interceptors.response.use(function(response) {
|
|||||||
return resp;
|
return resp;
|
||||||
}, function(error) {
|
}, function(error) {
|
||||||
const resp = error.response.data
|
const resp = error.response.data
|
||||||
if (resp.code == undefined && resp.msg == undefined) {
|
// if (resp.code == undefined && resp.msg == undefined) {
|
||||||
alert(`错误代码：无，原因：与服务器失去连接`)
|
// alert(`错误代码：无，原因：与服务器失去连接`)
|
||||||
} else if (resp.code != 200) {
|
// } else if (resp.code != 200) {
|
||||||
alert(`错误代码：${resp.code}，原因：${resp.msg}`)
|
// alert(`错误代码：${resp.code}，原因：${resp.msg}`)
|
||||||
}
|
// }
|
||||||
// store.dispatch("closeLoad");
|
// store.dispatch("closeLoad");
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
});
|
});
|
||||||
export default myaxios
|
export default myaxios
|
||||||
76
Yi.Vue/src/util/routes.js
Normal file
76
Yi.Vue/src/util/routes.js
Normal file
@@ -0,0 +1,76 @@
|
|||||||
|
// Imports
|
||||||
|
import { kebabCase } from 'lodash'
|
||||||
|
import { leadingSlash, trailingSlash } from '@/util/helpers'
|
||||||
|
|
||||||
|
export function abort(code = 404) {
|
||||||
|
return {
|
||||||
|
name: 'FourOhFour',
|
||||||
|
path: '*',
|
||||||
|
component: () => error(code),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function error(code = 404) {
|
||||||
|
return import (
|
||||||
|
/* webpackChunkName: "error-[request]" */
|
||||||
|
`@/views/${code}.vue`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function layout(layout = 'Default', children, path = '') {
|
||||||
|
const dir = kebabCase(layout)
|
||||||
|
|
||||||
|
return {
|
||||||
|
children,
|
||||||
|
component: () =>
|
||||||
|
import (
|
||||||
|
/* webpackChunkName: "layout-[request]" */
|
||||||
|
`@/layouts/${dir}/Index`
|
||||||
|
),
|
||||||
|
path,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function redirect(
|
||||||
|
path = '*',
|
||||||
|
rhandler,
|
||||||
|
) {
|
||||||
|
if (typeof path === 'function') {
|
||||||
|
rhandler = path
|
||||||
|
path = '*'
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
path,
|
||||||
|
redirect: to => {
|
||||||
|
const rpath = rhandler(to)
|
||||||
|
const url = rpath !== '' ?
|
||||||
|
leadingSlash(trailingSlash(rpath)) :
|
||||||
|
rpath
|
||||||
|
|
||||||
|
return `/${url}`
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function route(name, component, path = '') {
|
||||||
|
component = Object(component) === component ?
|
||||||
|
component :
|
||||||
|
{ default: name.replace(' ', '') }
|
||||||
|
|
||||||
|
const components = {}
|
||||||
|
|
||||||
|
for (const [key, value] of Object.entries(component)) {
|
||||||
|
components[key] = () =>
|
||||||
|
import (
|
||||||
|
/* webpackChunkName: "views-[request]" */
|
||||||
|
`@/views/${value}`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
name,
|
||||||
|
components,
|
||||||
|
path,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,23 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
|
||||||
<p>导航栏</p>
|
|
||||||
<v-card class="mx-auto" width="300">
|
|
||||||
<ccList :items="items"></ccList>
|
|
||||||
</v-card>
|
|
||||||
|
|
||||||
<p>表格</p>
|
|
||||||
|
|
||||||
<v-card class="mx-auto" width="1000">
|
<v-card class="mx-auto" width="100%">
|
||||||
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
|
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
|
||||||
</v-card>
|
</v-card>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import ccList from "./List.vue";
|
import ccTable from "../components/Table.vue"
|
||||||
import ccTable from "./Table.vue"
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
ccList,
|
|
||||||
ccTable
|
ccTable
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
4
Yi.Vue/src/views/UserProfile.vue
Normal file
4
Yi.Vue/src/views/UserProfile.vue
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
<template>
|
||||||
|
<div>666</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
<template>
|
|
||||||
<v-app>
|
|
||||||
<v-app-bar
|
|
||||||
app
|
|
||||||
color="primary"
|
|
||||||
dark
|
|
||||||
>
|
|
||||||
<div class="d-flex align-center">
|
|
||||||
<v-img
|
|
||||||
alt="Vuetify Logo"
|
|
||||||
class="shrink mr-2"
|
|
||||||
contain
|
|
||||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
|
|
||||||
transition="scale-transition"
|
|
||||||
width="40"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<v-img
|
|
||||||
alt="Vuetify Name"
|
|
||||||
class="shrink mt-1 hidden-sm-and-down"
|
|
||||||
contain
|
|
||||||
min-width="100"
|
|
||||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
|
|
||||||
width="100"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
|
||||||
target="_blank"
|
|
||||||
text
|
|
||||||
>
|
|
||||||
<span class="mr-2">Latest Release</span>
|
|
||||||
<v-icon>mdi-open-in-new</v-icon>
|
|
||||||
</v-btn>
|
|
||||||
</v-app-bar>
|
|
||||||
|
|
||||||
<v-main>
|
|
||||||
<router-view/>
|
|
||||||
</v-main>
|
|
||||||
</v-app>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'App',
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
//
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@@ -1,7 +0,0 @@
|
|||||||
import Vue from 'vue';
|
|
||||||
import Vuetify from 'vuetify/lib/framework';
|
|
||||||
|
|
||||||
Vue.use(Vuetify);
|
|
||||||
|
|
||||||
export default new Vuetify({
|
|
||||||
});
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import VueRouter from 'vue-router'
|
|
||||||
import Home from '../views/Home.vue'
|
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
|
||||||
|
|
||||||
const routes = [{
|
|
||||||
path: '/',
|
|
||||||
name: 'Home',
|
|
||||||
component: Home
|
|
||||||
|
|
||||||
},
|
|
||||||
{
|
|
||||||
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: function() {
|
|
||||||
return import ( /* webpackChunkName: "about" */ '../views/About.vue')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const router = new VueRouter({
|
|
||||||
mode: 'history',
|
|
||||||
base: process.env.BASE_URL,
|
|
||||||
routes
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<hello-world />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import HelloWorld from '../components/HelloWorld'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Home',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
HelloWorld,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user