perf: style in mobile mode (#1065)

src/views/clipboard/index.vue

@@ -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>

src/views/errorPage/401.vue

@@ -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;

src/views/i18n-demo/index.vue

@@ -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{

src/views/layout/components/AppMain.vue

@@ -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;
 }

src/views/layout/components/Navbar.vue

 <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: {

src/views/login/index.vue

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

src/views/login/socialsignin.vue

@@ -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)
     }
   }
 }

src/views/theme/index.vue

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