updated: mobile style

Author: sendya

src/components/layout/PageHeader.vue

@@ -153,10 +153,20 @@
           border-radius: 4px;
           margin-right: 16px;
         }
-        .content {
+        .content, .headerContent {
           flex: auto;
           color: rgba(0,0,0,.45);
           line-height: 22px;
+
+          .link {
+            margin-top: 16px;
+            line-height: 24px;
+
+            a {
+              font-size: 14px;
+              margin-right: 32px;
+            }
+          }
         }
         .extra {
           flex: 0 1 auto;
@@ -188,8 +198,18 @@
           flex: 0 1 25%;
           margin: 0 2% 8px 0;
         }
-        .content {
+        .content, .headerContent {
           flex: 0 1 70%;
+
+          .link {
+            margin-top: 16px;
+            line-height: 24px;
+
+            a {
+              font-size: 14px;
+              margin-right: 10px;
+            }
+          }
         }
         .extra {
           flex: 1 1 auto;

src/components/layout/PageView.vue

@@ -56,13 +56,25 @@
 </script>
 
 <style lang="scss" scoped>
+  .extra-img {
+    margin-top: -60px;
+    text-align: center;
+    width: 195px;
+
+    img {
+      width: 100%;
+    }
+  }
+
+  .mobile {
     .extra-img{
-        margin-top: -60px;
-        text-align: center;
-        width: 195px;
+      margin-top: 0;
+      text-align: center;
+      width: 96px;
 
-        img{
-            width: 100%;
-        }
+      img{
+        width: 100%;
+      }
     }
+  }
 </style>

src/views/account/settings/Index.vue

@@ -1,10 +1,10 @@
 <template>
   <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
-    <div class="account-settings-info-main">
+    <div class="account-settings-info-main" :class="device">
       <div class="account-settings-info-left">
         <a-menu
-          mode="inline"
-          :style="{ border: '0' }"
+          :mode="device == 'mobile' ? 'horizontal' : 'inline'"
+          :style="{ border: '0', width: device == 'mobile' ? '560px' : 'auto'}"
           :defaultSelectedKeys="defaultSelectedKeys"
           type="inner"
           @openChange="onOpenChange"
@@ -48,7 +48,8 @@
 
 <script>
   import PageLayout from '@/components/layout/PageLayout'
-  import RouteView from "@/components/layout/RouteView";
+  import RouteView from "@/components/layout/RouteView"
+  import { mapState } from 'vuex'
 
   export default {
     components: {
@@ -57,6 +58,9 @@
     },
     data () {
       return {
+        // horizontal  inline
+        mode: 'inline',
+
         openKeys: [],
         defaultSelectedKeys: [],
 
@@ -81,6 +85,11 @@
         pageTitle: ''
       }
     },
+    computed: {
+      ...mapState({
+        device: state => state.app.device,
+      })
+    },
     created () {
       this.updateMenu()
     },
@@ -103,6 +112,22 @@
     height: 100%;
     overflow: auto;
 
+    &.mobile {
+      display: block;
+
+      .account-settings-info-left {
+        border-right: unset;
+        border-bottom: 1px solid #e8e8e8;
+        width: 100%;
+        height: 48px;
+        overflow-x: hidden;
+        overflow-y: auto;
+      }
+      .account-settings-info-right {
+        padding: 20px 40px;
+      }
+    }
+
     .account-settings-info-left {
       border-right: 1px solid #e8e8e8;
       width: 224px;
@@ -124,4 +149,5 @@
       }
     }
   }
+
 </style>

src/views/list/search/SearchLayout.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="search-head">
       <div class="search-input">
-        <a-input-search style="width: 522px" placeholder="请输入..." size="large" enterButton="搜索" />
+        <a-input-search style="width: 80%; max-width: 522px;" placeholder="请输入..." size="large" enterButton="搜索" />
       </div>
       <div style="padding: 0 24px">
         <a-tabs :tabBarStyle="{margin: 0}" @change="callback" :activeKey="activeKey">