zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf: style in mobile mode (#1065)

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"> <div class="app-container">
<el-tabs v-model="activeName"> <el-tabs v-model="activeName">
<el-tab-pane label="use clipboard directly" name="directly"> <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-button type="primary" icon="document" @click="handleCopy(inputData,$event)">copy</el-button>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="use clipboard by v-directive" name="v-directive"> <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-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="document">copy</el-button>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>

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

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

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

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

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

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

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

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

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

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

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

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