Skip to content

Commit dfc16d4

Browse files
HunlongyuHunlongyu
committed
20191128
1 parent 632f877 commit dfc16d4

13 files changed

+272
-88
lines changed

‎babel.config.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
module.exports = {
22
presets: [
33
'@vue/app'
4-
]
4+
],
5+
plugins: [['import', {
6+
'libraryName': 'view-design',
7+
'libraryDirectory': 'src/components'
8+
}]]
59
}

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "evt",
2+
"name": "zy-player",
33
"version": "0.1.0",
44
"private": true,
55
"scripts": {
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"axios": "^0.19.0",
1717
"core-js": "^2.6.5",
18-
"modern-normalize": "^0.5.0",
18+
"view-design": "^4.0.2",
1919
"vue": "^2.6.10",
2020
"vue-router": "^3.0.3",
2121
"vuex": "^3.0.1"
@@ -26,6 +26,7 @@
2626
"@vue/cli-service": "^3.12.0",
2727
"@vue/eslint-config-standard": "^4.0.0",
2828
"babel-eslint": "^10.0.1",
29+
"babel-plugin-import": "^1.13.0",
2930
"electron": "7.1.2",
3031
"eslint": "^5.16.0",
3132
"eslint-plugin-vue": "^5.0.0",

‎src/App.vue

+46-20
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,55 @@
11
<template>
2-
<div id="app">
3-
<div id="nav">
4-
<router-link to="/">Home</router-link> |
5-
<router-link to="/search">search</router-link>
6-
</div>
7-
<router-view/>
2+
<div id="app" :class="theme">
3+
<Layout class="box">
4+
<Sider class="sider" width="70"><ZYSider /></Sider>
5+
<Layout>
6+
<Header class="header"><ZYHeader /></Header>
7+
<Content class="content">
8+
<ZYContent />
9+
<Row>
10+
<Button type="primary" @click="switchTheme('light')">light</Button>
11+
<Button type="primary" @click="switchTheme('dark')">Dark</Button>
12+
</Row>
13+
</Content>
14+
</Layout>
15+
</Layout>
816
</div>
917
</template>
18+
<script>
19+
import ZYSider from '@/components/zy_sider.vue'
20+
import ZYHeader from '@/components/zy_header.vue'
21+
import ZYContent from '@/components/zy_content.vue'
22+
export default {
23+
name: 'app',
24+
data () {
25+
return {
26+
theme: 'light'
27+
}
28+
},
29+
components: {
30+
ZYSider,
31+
ZYHeader,
32+
ZYContent
33+
},
34+
methods: {
35+
switchTheme (e) {
36+
this.theme = e
37+
}
38+
}
39+
}
40+
</script>
1041

1142
<style lang="scss">
12-
#app {
13-
font-family: 'Avenir', Helvetica, Arial, sans-serif;
14-
-webkit-font-smoothing: antialiased;
15-
-moz-osx-font-smoothing: grayscale;
16-
text-align: center;
17-
color: #2c3e50;
43+
@import './assets/theme/dark.scss';
44+
@import './assets/theme/light.scss';
45+
html, body, #app, .box{
46+
height: 100%;
1847
}
19-
#nav {
20-
padding: 30px;
21-
a {
22-
font-weight: bold;
23-
color: #2c3e50;
24-
&.router-link-exact-active {
25-
color: #42b983;
26-
}
48+
.box{
49+
.header{
50+
width: 100%;
51+
height: 35px;
52+
padding: 0;
2753
}
2854
}
2955
</style>

‎src/assets/theme/dark.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.dark{
2+
.sider,.header,.content{
3+
background-color: #000;
4+
color: #eee;
5+
border: 1px solid #ccc;
6+
}
7+
}

‎src/assets/theme/light.scss

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
.light{
2+
.sider,.header,.content{
3+
background-color: #fff;
4+
color: #000;
5+
}
6+
.sider{
7+
border-right: 1px solid #dcdee2;
8+
.sider-box{
9+
color: #808695;
10+
i{
11+
&:hover{
12+
color: #515a6e;
13+
background-color: #efefef;
14+
border-right: 1px solid #808695;
15+
}
16+
&.active{
17+
color: #515a6e;
18+
background-color: #efefef;
19+
border-left: 2px solid #515a6e;
20+
}
21+
}
22+
}
23+
}
24+
}

‎src/background.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: tru
1717
function createWindow () {
1818
// Create the browser window.
1919
win = new BrowserWindow({
20-
width: 1024,
20+
width: 1400,
2121
height: 800,
22+
frame: false,
2223
webPreferences: {
2324
webSecurity: false,
2425
nodeIntegration: true

‎src/components/HelloWorld.vue

-58
This file was deleted.

‎src/components/zy_content.vue

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<Row></Row>
3+
</template>
4+
<script>
5+
export default {
6+
name: 'zy_content',
7+
methods: {
8+
switchTheme (e) {
9+
this.theme = e
10+
}
11+
}
12+
}
13+
</script>

‎src/components/zy_header.vue

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<Row class="header-box">
3+
<div class="left">
4+
<Icon type="md-return-left" />
5+
</div>
6+
<div class="right">
7+
<Icon type="md-remove" />
8+
<Icon type="md-add" />
9+
<Icon type="md-close" />
10+
</div>
11+
</Row>
12+
</template>
13+
<script>
14+
export default {
15+
name: 'zy_header'
16+
}
17+
</script>
18+
<style lang="scss" scoped>
19+
.header-box{
20+
height: 100%;
21+
border: 1px solid #000;
22+
-webkit-app-region: drag;
23+
-webkit-user-select: none;
24+
.left,.right{
25+
display: inline-block;
26+
height: 35px;
27+
i{
28+
-webkit-app-region: no-drag;
29+
font-size: 20px;
30+
width:35px;
31+
height:35px;
32+
line-height:35px;
33+
cursor: pointer;
34+
background-color: #aaa;
35+
}
36+
}
37+
.left{
38+
top: 0;
39+
left: 0;
40+
}
41+
.right{
42+
position: absolute;
43+
top: 0;
44+
right: 0;
45+
}
46+
}
47+
</style>

‎src/components/zy_sider.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<Row class="sider-box">
3+
<div class="top">
4+
<Icon class="active" type="md-list" />
5+
<Icon type="md-search" />
6+
<Icon type="md-play" />
7+
<Icon type="md-star" />
8+
</div>
9+
<div class="bottom">
10+
<Icon type="md-settings" />
11+
</div>
12+
</Row>
13+
</template>
14+
<script>
15+
export default {
16+
name: 'zy-sider'
17+
}
18+
</script>
19+
<style lang="scss" scoped>
20+
.sider-box{
21+
height: 100%;
22+
position: relative;
23+
-webkit-app-region: drag;
24+
-webkit-user-select: none;
25+
.bottom{
26+
position: absolute;
27+
bottom: 0;
28+
}
29+
i{
30+
-webkit-app-region: no-drag;
31+
font-size: 32px;
32+
width: 70px;
33+
height: 70px;
34+
line-height: 70px;
35+
cursor: pointer;
36+
}
37+
}
38+
</style>

‎src/main.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import Vue from 'vue'
22
import App from './App.vue'
33
import router from './router'
44
import store from './store'
5-
// import 'modern-normalize'
5+
import '@/plugin/iview/'
6+
// import '@/assets/theme/dark.scss'
7+
// import '@/assets/theme/light.scss'
68

79
Vue.config.productionTip = false
810

‎src/plugin/iview/index.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import Vue from 'vue'
2+
import 'view-design/dist/styles/iview.css'
3+
import {
4+
Layout, Sider, Header, Content, Row, Col,
5+
Icon, Button
6+
} from 'view-design'
7+
8+
Vue.component('Layout', Layout)
9+
Vue.component('Sider', Sider)
10+
Vue.component('Header', Header)
11+
Vue.component('Content', Content)
12+
Vue.component('Row', Row)
13+
Vue.component('Col', Col)
14+
Vue.component('Icon', Icon)
15+
Vue.component('Button', Button)

0 commit comments

Comments
 (0)