sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

perf: style in mobile mode (#1065)

Browse source
This commit is contained in:
花裤衩 2018-09-07 17:03:40 +08:00 committed by GitHub
parent 62fb5d1e14
commit 9c5352ecd6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 39 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/clipboard/index.vue
View file

@ -2,11 +2,11 @@
<div class="app-container">
<el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly">
<el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;"/>
<el-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
</el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
<el-input v-model="inputData" placeholder="Please input" style="width:400px;"/>
<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;"/>
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
</el-tab-pane>
</el-tabs>

1
src/views/errorPage/401.vue
View file

@ -53,6 +53,7 @@ export default {
<style rel="stylesheet/scss" lang="scss" scoped>
.errPage-container {
width: 800px;
max-width: 100%;
margin: 100px auto;
.pan-back-btn {
background: #008489;

5
src/views/i18n-demo/index.vue
View file

@ -15,7 +15,7 @@
</el-card>
<el-row :gutter="20" style="margin:100px 15px 50px;">
<el-col :span="12">
<el-col :span="12" :xs="24">
<div class="block">
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date"/>
</div>
@ -37,7 +37,7 @@
<el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
</div>
</el-col>
<el-col :span="12">
<el-col :span="12" :xs="24">
<el-table :data="tableData" fit highlight-current-row border style="width: 100%">
<el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center"/>
<el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center"/>
@ -103,6 +103,7 @@ export default {
<style scoped>
.box-card {
width: 600px;
max-width: 100%;
margin: 20px auto;
}
.item-btn{

1
src/views/layout/components/AppMain.vue
View file

@ -26,6 +26,7 @@ export default {
.app-main {
/*84 = navbar + tags-view = 50 +34 */
min-height: calc(100vh - 84px);
width: 100%;
position: relative;
overflow: hidden;
}

31
src/views/layout/components/Navbar.vue
View file

@ -1,25 +1,27 @@
<template>
<el-menu class="navbar" mode="horizontal">
<div class="navbar">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<breadcrumb class="breadcrumb-container"/>
<div class="right-menu">
<error-log class="errLog-container right-menu-item"/>
<template v-if="device!=='mobile'">
<error-log class="errLog-container right-menu-item"/>
<el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
<screenfull class="screenfull right-menu-item"/>
</el-tooltip>
<el-tooltip :content="$t('navbar.screenfull')" effect="dark" placement="bottom">
<screenfull class="screenfull right-menu-item"/>
</el-tooltip>
<el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
<size-select class="international right-menu-item"/>
</el-tooltip>
<el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
<size-select class="international right-menu-item"/>
</el-tooltip>
<lang-select class="international right-menu-item"/>
<lang-select class="international right-menu-item"/>
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
<theme-picker class="theme-switch right-menu-item"/>
</el-tooltip>
<el-tooltip :content="$t('navbar.theme')" effect="dark" placement="bottom">
<theme-picker class="theme-switch right-menu-item"/>
</el-tooltip>
</template>
<el-dropdown class="avatar-container right-menu-item" trigger="click">
<div class="avatar-wrapper">
@ -43,7 +45,7 @@
</el-dropdown-menu>
</el-dropdown>
</div>
</el-menu>
</div>
</template>
<script>
@ -70,7 +72,8 @@ export default {
...mapGetters([
'sidebar',
'name',
'avatar'
'avatar',
'device'
])
},
methods: {

1
src/views/login/index.vue
View file

@ -213,6 +213,7 @@ $light_gray:#eee;
left: 0;
right: 0;
width: 520px;
max-width: 100%;
padding: 35px 35px 15px 35px;
margin: 120px auto;
}

24
src/views/login/socialsignin.vue
View file

@ -10,24 +10,26 @@
</template>
<script>
import openWindow from '@/utils/openWindow'
// import openWindow from '@/utils/openWindow'
export default {
name: 'SocialSignin',
methods: {
wechatHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart)
const appid = 'xxxxx'
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
openWindow(url, thirdpart, 540, 540)
alert('ok')
// this.$store.commit('SET_AUTH_TYPE', thirdpart)
// const appid = 'xxxxx'
// const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
// const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
// openWindow(url, thirdpart, 540, 540)
},
tencentHandleClick(thirdpart) {
this.$store.commit('SET_AUTH_TYPE', thirdpart)
const client_id = 'xxxxx'
const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri
openWindow(url, thirdpart, 540, 540)
alert('ok')
// this.$store.commit('SET_AUTH_TYPE', thirdpart)
// const client_id = 'xxxxx'
// const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
// const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri
// openWindow(url, thirdpart, 540, 540)
}
}
}

1
src/views/theme/index.vue
View file

@ -87,6 +87,7 @@ export default {
}
.box-card {
width: 400px;
max-width: 100%;
margin: 20px auto;
}