Permalink
Browse files

responsive and safari shit

  • Loading branch information...
liyirui_i
liyirui_i committed Mar 26, 2018
1 parent 90f3548 commit 3d4e3eb7d7a3330a655ba26fae0d6b635727627b
@@ -0,0 +1,16 @@
export default function ajax (url) {
return new Promise(function (resolve, reject) {
const xhr = new window.XMLHttpRequest()
xhr.open('GET', url, true)
xhr.send(null)
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.responseText)
} else {
reject(xhr)
}
}
}
})
}
@@ -4,7 +4,7 @@ html, body
width: 100%
height: 100%
color: $color-dark-grey
background: $color-background
background: white
font-family -apple-system,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","WenQuanYi Micro Hei","Microsoft Yahei",sans-serif
-webkit-font-smoothing antialiased
input
@@ -4,18 +4,20 @@
font-size: $fontsize-medium
line-height: 1.6
color: $color-dark-grey
.hljs
background-color: #F9F8F8
p
margin: 1.2em 0
.anchor
display: inline-block
h2
margin-top: 1.2em
margin-bottom: .8em
font-size: 1.5em
font-size: 2em
font-weight: 600
h3
margin: 1em 0 1em
font-size: 1.25em
font-size: 1.4em
font-weight: 600
h4
margin: 0.8em 0 0.8em
@@ -40,7 +42,7 @@
word-break: break-word
th
font-weight: 600
background-color: $color-row-line
background-color: #F9F8F8
ul, ol, li
line-height: 20px
li
@@ -78,4 +80,6 @@ strong
font-weight: bold
a
text-decoration: none
color: rgb(0, 154, 97)
color:#3CA0E6
&:hover
color: #137DC6
@@ -0,0 +1,66 @@
<template>
<div class="badge">
<span class="badge-left">{{badgeName}}</span>
<span class="badge-right">
{{badgeValue}}</span>
</div>
</template>
<script>
import ajax from '../../common/js/ajax.js'
const urlMap = {
Star: 'https://img.shields.io/github/stars/didi/cube-ui.json',
Fork: 'https://img.shields.io/github/forks/didi/cube-ui.json',
Watch: 'https://img.shields.io/github/watchers/didi/cube-ui.json'
}
export default{
data() {
return {
badgeName: '',
badgeValue: ''
}
},
props: {
type: {
type: String,
default () {
return ''
}
}
},
mounted() {
let badge = this.type
this.getData(badge)
},
methods: {
getData (badge) {
let url = urlMap[badge]
ajax(url).then((response) => {
let result = JSON.parse(response)
console.log(result)
this.badgeName = result.name
this.badgeValue = result.value
})
}
}
}
</script>
<style lang="stylus">
.badge
display: inline-block
text-align: center
border: 1px #4AA8FF solid
border-radius: 3px
font-size: 0px
color: #000000
margin-right: 3px
span
display: inline-block
font-size: 12px
.badge-left
padding: 4px 11px
background-color: #89C6FF
.badge-right
padding: 4px 11px
border-left: 1px #4AA8FF solid
background-color: white
</style>
@@ -2,7 +2,7 @@
<div class="page-display">
<div class="display-wrapper">
<section class="mofang-demo">
<iframe :src="ifrSrc" frameborder="0" width="100%" height="100%"></iframe>
<iframe :src="ifrSrc" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</section>
</div>
</div>
@@ -39,21 +39,24 @@
.page-display
position: relative
.display-wrapper
position: absolute
position: relative
width: 330px
height: 645px
top: 50%
left: 50%
transform: translate(-50%, -50%)
transform: translate(0, -50%)
background: url("./iphoneX.png") no-repeat
background-size: cover
margin: 0 45px
.mofang-demo
position: absolute
top: 64px
left: 22px
right: 22px
width: 286px
bottom: 36px
overflow: hidden
border-radius: 0 0 35px 35px
background-color: #edf0f4
iframe
// safari shit
width: 286px!important
</style>
@@ -31,8 +31,7 @@
display: inline-block
margin-bottom: 20px
.page-display
width: 100%
.display-wrapper
position: static
margin: 0
transform: none
</style>
@@ -9,7 +9,9 @@
<site-lang></site-lang>
</div>
<span class="toggle-nav" @click="toggleNav">
<img src="./nav.svg">
<svg class="icon" viewBox="0 0 1024 1024" width="32" height="32">
<path d="M151.990813 175.990625h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743807a35.999719 35.999719 0 0 1-35.999718 35.999718h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999718V211.990344a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 288.741744h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v22.511824a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-22.511824a35.999719 35.999719 0 0 1 35.999719-35.999719z m0 286.509762h719.994375a35.999719 35.999719 0 0 1 35.999718 35.999719v24.743806a35.999719 35.999719 0 0 1-35.999718 35.999719h-719.994375a35.999719 35.999719 0 0 1-35.999719-35.999719v-24.743806a35.999719 35.999719 0 0 1 35.999719-35.999719z" fill="#dedcdc"></path>
</svg>
</span>
</div>
<div class="router-view">
@@ -68,7 +70,7 @@
overflow: hidden
@media screen and (max-width: 960px)
padding: 0
background-color: $color-regular-blue
background-color: transparent
.toggle-nav
display: none
@media screen and (max-width: 960px)
@@ -87,6 +89,8 @@
height: 20px
&.active
height: 255px
.tabs
height: auto
.logo
float: left
padding: 0 28px
@@ -99,10 +103,13 @@
.tabs
float: right
padding: 0 30px
box-shadow: none
height: 0
@media screen and (max-width: 960px)
float: none
padding: 0
border-top: solid 1px rgba(255, 255, 255, 0.5)
background-color: #fbfbfb
box-shadow: 0 -2px 8px rgba(0,0,0,0.1)
.tab
display: inline-block
margin: 0 10px
@@ -112,7 +119,7 @@
display: block
line-height: 45px
margin: 0 20px
color: $color-white
color: black
&:hover
color: $color-orange
.router-link-active
@@ -6,9 +6,13 @@
<slot name="desc"></slot>
</p>
<div class="ghbtns">
<a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/stars/didi/cube-ui.svg?style=social&label=Star"></a>
<a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/forks/didi/cube-ui.svg?style=social&label=Fork"></a>
<a href="https://github.com/didi/cube-ui"><img src="https://img.shields.io/github/watchers/wepyjs/wepy.svg?style=social&label=Watch"></a>
<Badge type="Star"></Badge>
<Badge type="Fork"></Badge>
<Badge type="Watch"></Badge>
</div>
<div>
<router-link to="/zh-CN/docs/introduction" class="btn-link"><span>介绍</span></router-link>
<router-link to="/zh-CN/docs/quick-start" class="btn-link btn-active"><span>快速开始</span></router-link>
</div>
</div>
<section class="features">
@@ -46,9 +50,16 @@
</template>
<script>
export default {}
import Badge from '../badge/badge.vue'
export default {
components: {
Badge
}
}
</script>
<style lang="stylus">
@require "~@/common/stylus/variable.styl"
.home-index
min-height: 100%
box-sizing: border-box
@@ -62,19 +73,32 @@
background: url("./cube.png") no-repeat 520px -31px
background-size: 1515px 696px
@media screen and (max-width: 960px)
padding: 50px 0 30px 0
padding: 40px 0 30px 0
margin-top: 0
text-align: center
h2
font-size: 60px
@media screen and (max-width: 960px)
font-size: 30px
> p
margin: 30px 0
margin: 30px 0 26px 0
font-size: 18px
.ghbtns
height: 22px
a
display: inline-block
.btn-link
display: inline-block
box-sizing: border-box
width: 164px
height: 42px
text-align: center
line-height: 42px
font-size: $fontsize-large-x
color: #000000
background-color: #89C6FF
border-radius: 3px
margin-top: 36px
margin-right: 18px
border: 2px solid #89C6FF
.btn-active
background-color: white
.features
padding: 60px 0 20px 0
background-color: #FBFBFB
@@ -38,7 +38,7 @@
a
color: #4B4B4C
@media screen and (max-width: 960px)
color: $color-white
color: black
&:active, &:hover
color: $color-orange
</style>
@@ -28,7 +28,6 @@
docPath = newPath.split('/').pop()
root = this.seekRoot(navList, docPath)
rootNav = root && navList[root]
console.log('xx', rootNav, root)
this.$set(rootNav, 'isRootActive', true)
}, {immediate: true})
},
@@ -2,7 +2,7 @@
<ul class="nav-ul">
<li class="nav-li" v-for="(item, key) in data" :class="{open: item.isRootActive}" :key="key">
<template v-if="item.name">
<p class="nav-name" @click="Switch(item)">{{item.name}}</p>
<p class="nav-name" @click="derail(item)">{{item.name}}</p>
<side-nav :data="item.subList"></side-nav>
</template>
<router-link
@@ -29,7 +29,7 @@
}
},
methods: {
Switch (item) {
derail (item) {
let nowActive = item.isRootActive
this.$set(item, 'isRootActive', !nowActive)
}
@@ -55,7 +55,7 @@
left: 30px
top: 0
font-size: 22px
color: $color-black
color: #000000
.arrow
width: 10px
height: 10px
@@ -73,13 +73,13 @@
top: 0
right: 0px
&::before
border-top-color: $color-black
border-top-color: #000000
top: 2px
.rotate
transform: rotate(180deg)
.nav-name
font-size: $fontsize-large-xxx
color: $color-black
color: #000000
border-bottom: #E3E3E3 solid 1px
padding: 15px 0 15px 30px
margin-left: 30px
@@ -92,7 +92,7 @@
padding: 5px 0
.nav-name
font-size: $fontsize-large-x
color: $color-black
color: #000000
border: none
padding: 0
margin: 0
@@ -111,7 +111,7 @@
content: ""
width: 20px
height: 100%
background-color: $color-orange-light
background-color: #FFC9A9
position: absolute
z-index: 1
left: 0
Oops, something went wrong.

0 comments on commit 3d4e3eb

Please sign in to comment.