修改手机端样式

assets/scss/common.scss

@@ -1,7 +1,8 @@
 // scroll
+
 ::-webkit-scrollbar {
-  width: 37.5px;
-  height: 37.5px;
+  width: 5px;
+  height: 5px;
   background: hsla(0, 0%, 100%, 0.6);
 }
 

assets/scss/mobileCommon.scss

@@ -18,58 +18,58 @@ html {
     -webkit-tap-highlight-color:rgba(0,0,0,0);
     -webkit-overflow-scrolling: touch;
   }
-
+  
   /* 内外边距通常让各个浏览器样式的表现位置不同 */
   body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
     margin: 0;
     padding: 0;
   }
-
+  
   input, select, textarea {
     font-size: 100%;
   }
-
+  
   /* 去掉各 Table  cell 的边距并让其边重合 */
   table {
     border-collapse: collapse;
     border-spacing: 0;
   }
-
+  
   /* 去除默认边框 */
   fieldset, img {
     border: 0;
   }
-
+  
   /* 去掉 firefox 下此元素的边框 */
   abbr, acronym {
     border: 0;
     font-variant: normal;
   }
-
+  
   /* 一致的 del 样式 */
   del {
     text-decoration: line-through;
   }
-
+  
   address, caption, cite, code, dfn, em, th, var {
     font-style: normal;
     font-weight: 500;
   }
-
+  
   /* 去掉列表前的标识, li 会继承 */
   ol, ul {
     list-style: none;
   }
-
+  
   /* 对齐是排版最重要的因素, 别让什么都居中 */
   caption, th {
     text-align: left;
   }
-
+  
   q:before, q:after {
     content: '';
   }
-
+  
   /* 统一上标和下标 */
   sub, sup {
     font-size: 75%;
@@ -77,121 +77,33 @@ html {
     position: relative;
     vertical-align: baseline;
   }
-
+  
   sup {
     top: -0.5em;
   }
-
+  
   sub {
     bottom: -0.25em;
   }
-
+  
   /* 正常链接 未访问 */
   a:link {
   }
-
+  
   /* 鼠标悬停 */
   a:hover {
     text-decoration: underline;
   }
-
+  
   /* 默认不显示下划线，保持页面简洁 */
   ins, a {
     text-decoration: none;
   }
-  .mobile-modal {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-    background: rgba(0,0,0,.3);
-    .mobile-modal-box {
-      position: absolute;
-      /*width: 5.92rem;*/
-      font-size: .28rem;
-      top: 27%;
-      left: 11%;
-      right: 11%;
-      z-index: 1000;
-      .mobile-modal-header {
-        line-height: .96rem;
-        background: rgb(65,141,246);
-        color: #fff;
-        text-align: center;
-        font-size: .32rem;
-        position: relative;
-        border-top-left-radius: .1rem;
-        border-top-right-radius: .1rem;
-        i {
-          position: absolute;
-          right: -.25rem;
-          font-size: .6rem;
-          bottom: .46rem;
-        }
-      }
-      .mobile-modal-content {
-        background: #fff;
-        color: #333;
-        padding: 0 .54rem;
-        border-bottom-left-radius: .1rem;
-        border-bottom-right-radius: .1rem;
-        div {
-          padding: .2rem 0;
-          line-height: .4rem;
-          border-bottom: .04rem solid rgb(183,213,254);
-          text-align: center;
-          &:last-child {
-            border-bottom: none;
-          }
-          &:first-child {
-            text-align: left;
-          }
-        }
-      }
-    }
-    .mobile-share-box {
-      position: fixed;
-      width: 100%;
-      font-size: .28rem;
-      bottom: 0;
-      left: 0;
-      z-index: 1000;
-      background: #fff;
-      color: #333;
-      .cancel-share {
-        height: .98rem;
-        line-height: .98rem;
-        font-size: .3rem;
-        text-align: center;
-        border-top: .04rem solid #cdcecf;
-      }
-      .share-area {
-        .share-item {
-          display: inline-block;
-          width: 1.5rem;
-          height: 1.52rem;
-          padding-top: .3rem;
-          i {
-            margin: 0 auto;
-            display: block;
-            font-size: .55rem;
-            width: .54rem;
-          }
-          span {
-            display: block;
-            text-align: center;
-            margin-top: .1rem;
-          }
-        }
-      }
-    }
-  }
+  
   .link-url {
     color: #01a44e;
   }
-
+  
   input {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -202,50 +114,19 @@ html {
     box-shadow: none;
     border: none;
   }
-
+  
   /*loading优先级*/
   .loading {
     z-index: 100000 !important;
   }
-
+  
   .mobile-content {
     padding-top: .88rem !important;
     margin-bottom: 1rem;
   }
-
-  /*求购title*/
-  .seek-title {
-    height: .96rem;
-    line-height: .96rem;
-    text-align: center;
-    position: relative;
-    border-bottom: .04rem solid rgb(219, 219, 219);
-    > img {
-      width: .36rem;
-      height: .38rem;
-      margin-right: .16rem;
-      vertical-align: middle;
-      margin-bottom: .16rem;
-    }
-    > span {
-      font-size: .35rem;
-      color: #666;
-    }
-    > a {
-      position: absolute;
-      right: .1rem;
-      top: 0;
-      font-size: .24rem;
-      color: #999;
-      margin-right: .1rem;
-      img {
-        width: .25rem;
-        height: .25rem;
-        margin-bottom: .04rem;
-      }
-    }
-  }
-
+  
+  
+  
   /*search*/
   .search-content {
     padding-top: .15rem;
@@ -279,26 +160,7 @@ html {
       margin-right: .2rem;
       margin-top: .1rem;
     }
-  }
-  /*报价info*/
-  .base-info {
-    //width: 7.17rem;
-    margin: 0 auto .18rem;
-    background: #fff;
-    padding: 0 .29rem;
-    .content-line {
-      height: .5rem;
-      line-height: .5rem;
-      font-size: .28rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      span {
-        color: #666;
-      }
-    }
-  }
-
+  } 
   .say-price-btn {
     display: block;
     width: 6.7rem;
@@ -311,4 +173,147 @@ html {
     font-size: .32rem;
     margin: 0 auto;
   }
+}
+
+/*报价info*/
+.base-info {
+  //width: 7.17rem;
+  margin: 0 auto .18rem;
+  background: #fff;
+  padding: 0 .29rem;
+  .content-line {
+    height: .5rem;
+    line-height: .5rem;
+    font-size: .28rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    span {
+      color: #666;
+    }
+  }
+}
+
+/*登录弹窗*/
+.mobile-modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0,0,0,.3);
+  .mobile-modal-box {
+    position: absolute;
+    /*width: 5.92rem;*/
+    font-size: .28rem;
+    top: 27%;
+    left: 11%;
+    right: 11%;
+    z-index: 1000;
+    .mobile-modal-header {
+      line-height: .96rem;
+      background: rgb(65,141,246);
+      color: #fff;
+      text-align: center;
+      font-size: .32rem;
+      position: relative;
+      border-top-left-radius: .1rem;
+      border-top-right-radius: .1rem;
+      i {
+        position: absolute;
+        right: -.25rem;
+        font-size: .6rem;
+        bottom: .46rem;
+      }
+    }
+    .mobile-modal-content {
+      background: #fff;
+      color: #333;
+      padding: 0 .54rem;
+      border-bottom-left-radius: .1rem;
+      border-bottom-right-radius: .1rem;
+      div {
+        padding: .2rem 0;
+        line-height: .4rem;
+        border-bottom: .04rem solid rgb(183,213,254);
+        text-align: center;
+        &:last-child {
+          border-bottom: none;
+        }
+        &:first-child {
+          text-align: left;
+        }
+      }
+    }
+  }
+  .mobile-share-box {
+    position: fixed;
+    width: 100%;
+    font-size: .28rem;
+    bottom: 0;
+    left: 0;
+    z-index: 1000;
+    background: #fff;
+    color: #333;
+    .cancel-share {
+      height: .98rem;
+      line-height: .98rem;
+      font-size: .3rem;
+      text-align: center;
+      border-top: .04rem solid #cdcecf;
+    }
+    .share-area {
+      .share-item {
+        display: inline-block;
+        width: 1.5rem;
+        height: 1.52rem;
+        padding-top: .3rem;
+        i {
+          margin: 0 auto;
+          display: block;
+          font-size: .55rem;
+          width: .54rem;
+        }
+        span {
+          display: block;
+          text-align: center;
+          margin-top: .1rem;
+        }
+      }
+    }
+  }
+}
+
+/*求购title*/
+.seek-title {
+  height: .96rem;
+  line-height: .96rem;
+  text-align: center;
+  position: relative;
+  border-bottom: .04rem solid rgb(219, 219, 219);
+  > img {
+    width: .36rem;
+    height: .38rem;
+    margin-right: .16rem;
+    vertical-align: middle;
+    margin-bottom: .16rem;
+  }
+  > span {
+    font-size: .35rem;
+    color: #666;
+  }
+  > a {
+    position: absolute;
+    right: .1rem;
+    top: 0;
+    font-size: .24rem;
+    color: #999;
+    margin-right: .1rem;
+    img {
+      width: .25rem;
+      height: .25rem;
+      margin-bottom: .04rem;
+    }
+  }
 }

assets/scss/variables.scss

@@ -51,12 +51,12 @@ $font-family: "Microsoft YaHei",'微软雅黑',serif;
 //Typography
 $font-size-small: 12px;
 $font-size: 14px;
-$font-size-large: 1.2rem;
-$font-size-h1: 2rem;
-$font-size-h2: 1.75rem;
-$font-size-h3: 1.5rem;
-$font-size-h4: 1.2rem;
-$font-size-h5: 1rem;
+$font-size-large: 12px;
+$font-size-h1: 20px;
+$font-size-h2: 17.5px;
+$font-size-h3: 15px;
+$font-size-h4: 12px;
+$font-size-h5: 10px;
 $font-size-h6: $font-size-small;
 
 $line-height: 1.2;

nuxt.config.js

@@ -1,5 +1,5 @@
 const path = require('path')
-const isProdMode = Object.is(process.env.NODE_ENV, 'production')
+const isProdMode = !Object.is(process.env.NODE_ENV, 'production')
 const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://192.168.253.60:9090/platform-b2c/' : 'http://10.1.51.125:8080/platform-b2c/')
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 
@@ -75,17 +75,7 @@ module.exports = {
     ]
   },
   css: [
-    // '~assets/scss/reset.css',
-    // '~assets/scss/common.css',
-    // '~assets/scss/commonComponent.css'
     '~assets/scss/app.scss'
-    // { src: '~assets/scss/index.scss', lang: 'scss' }
-
-    /* {
-      src: 'swiper/dist/css/swiper.css'
-    } */ /* , {
-      src: 'element-ui/lib/theme-default/index.css'
-    } */
   ],
   dev: !isProdMode,
   env: {

pages/mobile/share/storeShare/_uuid.vue

@@ -6,22 +6,34 @@
   </div>
 </template>
 <script>
-  import {CommodityList, StoreHeader, StoreFooter} from '~components/mobile/share'
-  export default {
-    layout: 'mobileStore',
-    fetch ({ store, params, redirect }) {
-      if (!params.uuid) {
-        return redirect('/error')
-      }
-      return Promise.all([
-        store.dispatch('shop/findStoreInfoFromUuid', params),
-        store.dispatch('shop/mobilePageCommoditiesOfStore', { storeid: params.uuid, origin: 'store', page: 1, count: 10 })
-      ])
-    },
-    components: {
-      CommodityList,
-      StoreHeader,
-      StoreFooter
+import {
+  CommodityList,
+  StoreHeader,
+  StoreFooter
+} from '~components/mobile/share'
+export default {
+  layout: 'mobileStore',
+  fetch({ store, params, redirect }) {
+    if (!params.uuid) {
+      return redirect('/error')
     }
+    return Promise.all([
+      store.dispatch('shop/findStoreInfoFromUuid', params),
+      store.dispatch('shop/mobilePageCommoditiesOfStore', {
+        storeid: params.uuid,
+        origin: 'store',
+        page: 1,
+        count: 10
+      })
+    ])
+  },
+  components: {
+    CommodityList,
+    StoreHeader,
+    StoreFooter
   }
+}
 </script>
+<style scoped lang="scss">
+@import '~assets/scss/mobileCommon';
+</style>