Browse Source

font-size尺寸

yangc 8 years ago
parent
commit
65769693d3
4 changed files with 90 additions and 16 deletions
  1. 53 0
      components/mobile/brand/BrandDetail.vue
  2. 20 10
      layouts/main.vue
  3. 17 0
      pages/mobile/brand/_code.vue
  4. 0 6
      pages/mobile/brand/_id.vue

+ 53 - 0
components/mobile/brand/BrandDetail.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="brandDetail">
+      <div class="brand-logo">
+        <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+      </div>
+      <div class="brand-switch-item">
+        <span class="mobile-switch-btn">品牌</span>
+        <span class="mobile-switch-btn">产品</span>
+      </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'MobileBrandsDetail',
+    data () {
+      return {
+        applications: []
+      }
+    },
+    computed: {
+      list () {
+        let list = this.$store.state.brandDetail.detail.data
+        if (list.application && list.application !== '') {
+          this.applications = list.application.split(',')
+        }
+        return list
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .brandDetail {
+    .brand-logo {
+      text-align: center;
+      height: 2.21rem;
+      line-height: 2.21rem;
+      width: 3.73rem;
+      img {
+        max-height: 2.21rem;
+      }
+    }
+    .brand-switch-item {
+      text-align: center;
+      .mobile-switch-btn {
+        background: #e75610;
+        color: #fff;
+        display: inline-block;
+        height: .68rem;
+        line-height: .68rem;
+      }
+    }
+  }
+</style>

+ 20 - 10
layouts/main.vue

@@ -29,16 +29,26 @@
       isMobile: function () {
         return this.$store.state.option.isMobile
       }
+    },
+    mounted () {
+      if (this.isMobile) {
+        let doc = document
+        let win = window
+        let docEl = doc.documentElement
+        let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
+        let recalc = function () {
+          let clientWidth = docEl.clientWidth
+          if (!clientWidth) return
+          if (clientWidth >= 640) {
+            docEl.style.fontSize = '100px'
+          } else {
+            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'
+          }
+        }
+        if (!doc.addEventListener) return
+        win.addEventListener(resizeEvt, recalc, false)
+        doc.addEventListener('DOMContentLoaded', recalc, false)
+      }
     }
-//    data () {
-//      return {
-//        url: window.location.href
-//      }
-//    },
-//    watch: {
-//      url: function (val, oldVal) {
-//        console.log(val)
-//      }
-//    }
   }
 </script>

+ 17 - 0
pages/mobile/brand/_code.vue

@@ -0,0 +1,17 @@
+<template>
+  <brand-detail></brand-detail>
+</template>
+<script>
+  import BrandDetail from '~components/mobile/brand/BrandDetail.vue'
+  export default {
+    layout: 'main',
+    components: {
+      BrandDetail
+    },
+    fetch ({ store, params }) {
+      return Promise.all([
+        store.dispatch('loadBrandDetail', { id: params.code })
+      ])
+    }
+  }
+</script>

+ 0 - 6
pages/mobile/brand/_id.vue

@@ -1,6 +0,0 @@
-<template>
-
-</template>
-<script>
-
-</script>