Skip to content

Commit ab197a6

Browse files
Ma63dMa63d
committed
update 响应式改造完成
1 parent e336589 commit ab197a6

File tree

8 files changed

+269
-66
lines changed

8 files changed

+269
-66
lines changed

‎src/Viewer.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,13 @@
1818
@import "./stylus/setting.styl"
1919
.main
2020
margin-top $header-total-height
21-
padding 0 65px
21+
padding 2em 65px 0
2222
min-height 500px
23+
@media screen and (max-width:840px)
24+
&
25+
margin-top $header-total-height-small
26+
padding-left 1.4em
27+
padding-right 1.4em
2328
.v-enter-active
2429
transition opacity 1.2s
2530
.v-enter

‎src/assets/menu.png

193 Bytes
Loading

‎src/components/Cover.vue

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<section class="cover" >
3+
<side-bar :problems="problems"></side-bar>
34
<div class="cover-inner">
45
<img class="cover-pic" src="../assets/coding.png">
56
<div class="cover-description">
@@ -30,6 +31,8 @@
3031
color $green
3132
.cover
3233
padding 100px 0
34+
.sidebar
35+
display none
3336
.cover-inner
3437
margin 0 auto
3538
max-width 800px
@@ -48,14 +51,25 @@
4851
line-height 1.5
4952
.light
5053
font-size 16px
54+
@media screen and (max-width:840px)
55+
&
56+
padding 0
57+
text-align center
58+
.cover-inner
59+
.cover-pic
60+
float none
61+
.sidebar
62+
display block
5163
</style>
5264
<script>
5365
import PulseOutLoader from './common/PulseOutLoader.vue'
66+
import SideBar from './common/SideBar.vue'
5467
import state from '../store/state'
5568
import service from '../services/cover/index'
5669
export default {
5770
components: {
58-
PulseOutLoader
71+
PulseOutLoader,
72+
SideBar
5973
},
6074
data () {
6175
return {
@@ -65,7 +79,8 @@
6579
solved: '',
6680
locked: '',
6781
lastUpdatedTime: '',
68-
loading: false
82+
loading: false,
83+
problems: {}
6984
}
7085
},
7186
activated () {
@@ -77,6 +92,7 @@
7792
this.solved = state.solved
7893
this.locked = state.locked
7994
this.lastUpdatedTime = state.lastUpdatedTime
95+
this.problems = state.resultJson
8096
}
8197
},
8298
methods: {
@@ -92,6 +108,7 @@
92108
delete data.locked
93109
delete data.lastUpdatedTime
94110
state.resultJson = data
111+
this.problems = state.resultJson
95112
this.loading = false
96113
})
97114
}

‎src/components/common/HeaderNav.vue

Lines changed: 68 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
<li class="nav-link-item"><router-link class="nav-link" to="/source">{{language === 'en' ? `Source Code` : `源码`}}</router-link></li>
1212
<li class="nav-link-item" v-if="gitRepoUrl !== null"><a class="nav-link" target="_blank" :href="gitRepoUrl"><img src="../../assets/github.jpeg" class="github-logo">git repos</a></li>
1313
</ul>
14-
<div class="search-container">
14+
<img src="../../assets/menu.png" alt="" class="menu-button" @click="toggle">
15+
<div class="search-container top">
1516
<input type="text" class="search" v-model="keywords" @focus="focus" @blur="blur" :class="[inputing?'active':'']" />
1617
<ul class="result-list" v-show="searchResult.length > 0 && inputing">
1718
<li class="result-item" v-for="result in searchResult">
@@ -29,53 +30,64 @@
2930
width 100%
3031
top 0
3132
background #fff
32-
z-index 1
33+
z-index 100
3334
box-shadow 0 0 4px rgba(0,0,0,0.25)
3435
.top-nav
3536
height $header-height
36-
padding $header-padding-ver 100px $header-padding-ver 60px
37-
.search-container
38-
float right
39-
position relative
40-
.search
41-
height 30px
42-
line-height 30px
43-
box-sizing border-box
44-
padding 0 15px 0 30px
45-
border 1px solid #e3e3e3
46-
color #2c3e50
47-
outline none
48-
border-radius 15px
49-
margin-right 10px
50-
margin-top 5px
51-
transition border-color 0.2s ease
52-
background #fff url(../../assets/search.png) 8px 5px no-repeat
53-
background-size 20px
54-
&.active
55-
border-color $green
56-
.result-list
57-
position absolute
58-
top 30px
59-
left 0
60-
list-style-type none
61-
background-color #fff
62-
border 1px solid #bbb
63-
border-radius 4px
64-
font-size 16px
65-
margin 10px 0 0
66-
padding 8px
67-
text-align left
68-
a
69-
color $medium
70-
&:hover
71-
color $green
72-
@media screen and (min-width: 720px)
37+
padding $header-padding-vertical 100px $header-padding-vertical 60px
38+
@media screen and (max-width:840px)
39+
&
40+
padding $header-padding-vertical-small 1.4em $header-padding-vertical-small 1.4em
41+
.search-container
42+
float right
43+
position relative
44+
@media screen and (max-width:840px)
45+
&.top
46+
display none
47+
.search
48+
height 30px
49+
line-height 30px
50+
box-sizing border-box
51+
padding 0 15px 0 30px
52+
border 1px solid #e3e3e3
53+
color #2c3e50
54+
outline none
55+
border-radius 15px
56+
margin-right 10px
57+
margin-top 5px
58+
transition border-color 0.2s ease
59+
background #fff url(../../assets/search.png) 8px 5px no-repeat
60+
background-size 20px
61+
&.active
62+
border-color $green
63+
.result-list
64+
position absolute
65+
top 30px
66+
left 0
67+
list-style-type none
68+
background-color #fff
69+
border 1px solid #bbb
70+
border-radius 4px
71+
font-size 16px
72+
margin 10px 0 0
73+
padding 8px
74+
text-align left
75+
.result-item
76+
a
77+
color $medium
78+
&:hover
79+
color $green
80+
@media screen and (min-width: 720px)
81+
.top-nav
7382
.result-list
7483
width 300px
7584
.nav-logo
7685
display inline-block
7786
.logo
7887
margin-right 6px
88+
@media screen and (max-width: 840px)
89+
&
90+
margin-left 10px
7991
.logo
8092
width 40px
8193
height 40px
@@ -84,19 +96,23 @@
8496
color $dark
8597
font-family $logo-font
8698
font-weight 500
87-
/**
88-
fixme! 留作以后的slogan样式
89-
*/
90-
/*.slogan
91-
font-size 1.3em
92-
color $light
93-
font-family $logo-font
94-
font-weight 500*/
99+
.menu-button
100+
float right
101+
width w = 24px
102+
height h = w
103+
margin-top (($header-height - h)/2)
104+
margin-right 10px
105+
@media screen and (min-width: 840px)
106+
&
107+
display none
95108
.nav-link-container
96109
float right
97110
list-style-type none
98111
margin 0
99112
padding 0
113+
@media screen and (max-width: 840px)
114+
&
115+
display none
100116
.nav-link-item
101117
display inline-block
102118
margin 0 .6em
@@ -115,6 +131,7 @@
115131
<script>
116132
import _ from 'lodash'
117133
import state from '../../store/state'
134+
import eventHub from '../../store/event_hub.js'
118135
export default{
119136
data () {
120137
return {
@@ -144,7 +161,10 @@
144161
this.searchResult = searchWithNumber(Number(this.keywords), state.resultJson)
145162
}
146163
}
147-
}, 200)
164+
}, 200),
165+
toggle () {
166+
eventHub.$emit('toggle')
167+
}
148168
},
149169
watch: {
150170
'keywords': function () {

‎src/components/common/Post.vue

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,14 @@
1111
.posts
1212
max-width 700px
1313
margin 0 auto
14-
@media screen and (max-width: 1300px)
15-
.posts
16-
margin-left 280px
14+
h1
15+
margin 0 0 1em
16+
@media screen and (max-width: 840px)
17+
&
18+
margin-left 0
19+
@media screen and (max-width: 1400px) and (min-width:841px)
20+
&
21+
margin-left 280px
1722
.question
1823
margin 2em 0
1924
padding-left 20px

0 commit comments

Comments
 (0)