css

src/assets/css/global.min.css.map

+{
+"version": 3,
+"mappings": "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",
+"sources": ["base.scss","global.scss"],
+"names": [],
+"file": "global.min.css"
+}
\ No newline at end of file

src/assets/css/global.scss

+@charset "utf-8";
+@import "base";
+
+$imgUrlDev: '../img/';
+$imgUrl: '../images/';
+#app{
+  height: 100%;
+}
+.navigator {
+  order: 1;
+  width: 100%;
+  height: 2rem;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 2019;
+  ul {
+    @include dispFlex();
+    height: 100%;
+    background-color: #ffffff;
+    box-shadow: 0rem 0rem 0.12rem 0rem rgba(196, 196, 196, 0.87);
+    justify-content: center;
+    align-items: center;
+    li {
+      @include boxFlex();
+      text-align: center;
+      i {
+        width: 26px;
+        height: 26px;
+        display: block;
+        margin: 0 auto;
+      }
+      .ico-1 {
+        background: url("#{$imgUrl}home/i1.png") no-repeat center center;
+        background-size: cover;
+      }
+      .ico-2 {
+        background: url("#{$imgUrl}home/i2.png") no-repeat center center;
+        background-size: cover;
+      }
+      .ico-3 {
+        background: url("#{$imgUrl}home/i3.png") no-repeat center center;
+        background-size: cover;
+      }
+      .ico-4 {
+        background: url("#{$imgUrl}home/i4.png") no-repeat center center;
+        background-size: cover;
+      }
+      .ico-5 {
+        background: url("#{$imgUrl}home/i5.png") no-repeat center center;
+        background-size: cover;
+      }
+      p {
+        margin-top: 10px;
+        font-size: 10px;
+        color: #adadad;
+      }
+      &.curr {
+        .ico-1 {
+          background: url("#{$imgUrl}home/i1_s.png") no-repeat center center;
+          background-size: cover;
+        }
+        .ico-2 {
+          background: url("#{$imgUrl}home/i2_s.png") no-repeat center center;
+          background-size: cover;
+        }
+        .ico-3 {
+          background: url("#{$imgUrl}home/i3_s.png") no-repeat center center;
+          background-size: cover;
+        }
+        .ico-4 {
+          background: url("#{$imgUrl}home/i4_s.png") no-repeat center center;
+          background-size: cover;
+        }
+        .ico-5 {
+          background: url("#{$imgUrl}home/i5_s.png") no-repeat center center;
+          background-size: cover;
+        }
+        p {
+          color: #4e8eee;
+        }
+      }
+    }
+  }
+}
+

src/assets/css/index.min.css

-html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
-
-html * { outline: 0; -webkit-text-size-adjust: none !important; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important; }
-
-html, body { font-family: sans-serif; }
-
-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, menu, nav, section { margin: 0; padding: 0; }
-
-button, input, select, textarea { font-size: 100%; border: none; -webkit-appearance: none; }
-
-input[type=button], input[type=file], input[type=submit] { cursor: pointer; }
-
-table { border-collapse: collapse; border-spacing: 0; }
-
-ol, ul, dl { list-style: none; }
-
-h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 500; }
-
-em, b, i { font-style: normal; }
-
-a { text-decoration: none; }
-
-img { border: none; }
-
-.clr { *zoom: 1; clear: both; }
-
-.clr:after { content: "."; clear: both; height: 0; visibility: hidden; display: block; }
-
-.fl { float: left; _display: inline; }
-
-.fr { float: right; _display: inline; }
-
-.va-t { vertical-align: top; }
-
-.va-m { vertical-align: middle; }
-
-.va-b { vertical-align: bottom; }
-
-.i-hide { display: none; }
-
-.i-show { display: block; }
-
-.lineBlock { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; }
-
-.lbBox { font-size: 0 !important; *word-spacing: -1px !important; }
-
-.boxsiz { -webkit-box-sizing: border-box; box-sizing: border-box; }
-
-html, body { width: 100%; height: 100%; }
-
-body { overflow-x: hidden; }
-
-.emptys { margin-left: -1px; width: 1px; height: 100%; font-size: 0; vertical-align: middle; }
-
-@media (min-width: 750px) { html { background: #666; }
-  body { max-width: 480px; margin: 0 auto; background: #fff; } }
-
-/*# sourceMappingURL=index.min.css.map */

src/assets/css/index.min.css.map

-{
-"version": 3,
-"mappings": "AAAA,IAAK,GACH,wBAAwB,EAAE,IAAI,EAC9B,oBAAoB,EAAE,IAAI;;AAG5B,MAAO,GACL,OAAO,EAAE,CAAC,EACV,wBAAwB,EAAE,eAAe,EACzC,2BAA2B,EAAE,2BAA2B;;AAG1D,UAAW,GACT,WAAW,EAAE,UAAU;;AAGzB,iOAAkO,GAChO,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,CAAC;;AAGZ,+BAAgC,GAC9B,SAAS,EAAE,IAAI,EACf,MAAM,EAAE,IAAI,EACZ,kBAAkB,EAAE,IAAI;;AAG1B,wDAAyD,GACvD,MAAM,EAAE,OAAO;;AAGjB,KAAM,GACJ,eAAe,EAAE,QAAQ,EACzB,cAAc,EAAE,CAAC;;AAGnB,UAAW,GACT,UAAU,EAAE,IAAI;;AAGlB,sBAAuB,GACrB,SAAS,EAAE,IAAI,EACf,WAAW,EAAE,GAAG;;AAGlB,QAAS,GACP,UAAU,EAAE,MAAM;;AAGpB,CAAE,GACA,eAAe,EAAE,IAAI;;AAGvB,GAAI,GACF,MAAM,EAAE,IAAI;;AAGd,IAAK,GACH,KAAK,EAAE,CAAC,EACR,KAAK,EAAE,IAAI;;AAGb,UAAW,GACT,OAAO,EAAE,GAAG,EACZ,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,CAAC,EACT,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,KAAK;;AAGhB,GAAI,GACF,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,MAAM;;AAGlB,GAAI,GACF,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM;;AAGlB,KAAM,GACJ,cAAc,EAAE,GAAG;;AAGrB,KAAM,GACJ,cAAc,EAAE,MAAM;;AAGxB,KAAM,GACJ,cAAc,EAAE,MAAM;;AAGxB,OAAQ,GACN,OAAO,EAAE,IAAI;;AAGf,OAAQ,GACN,OAAO,EAAE,KAAK;;AAGhB,UAAW,GACT,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,CAAC,EACP,cAAc,EAAE,MAAM,EACtB,YAAY,EAAE,MAAM;;AAGtB,MAAO,GACL,SAAS,EAAE,YAAY,EACvB,aAAa,EAAE,eAAe;;AAGhC,OAAQ,GACN,kBAAkB,EAAE,UAAU,EAC9B,UAAU,EAAE,UAAU;;AAGxB,UAAW,GACT,KAAK,EAAE,IAAI,EACX,MAAM,EAAE,IAAI;;AAGd,IAAK,GACH,UAAU,EAAE,MAAM;;AAGpB,OAAQ,GACN,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,CAAC,EACZ,cAAc,EAAE,MAAM;;AAGxB,yBAA0B,GACxB,IAAK,GACH,UAAU,EAAE,IAAI;EAElB,IAAK,GACH,SAAS,EAAE,KAAK,EAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,IAAI",
-"sources": ["base.scss"],
-"names": [],
-"file": "index.min.css"
-}
\ No newline at end of file

src/assets/css/index.scss

-@charset "utf-8";
-@import "base";
-
-$imgUrlDev: '../img/';
-$imgUrl: '../../images/app/';
-
-

src/main.js

@@ -6,7 +6,7 @@ import filters from './filters'
 
 //css全局加载
 import 'vant/lib/index.css';
-import '@/assets/css/index.min.css'
+import '@/assets/css/global.min.css'
 
 //过滤器遍历
 Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));

src/views/common/Navigator.vue

+<template>
+    <div class="navigator">
+        <ul class="boxsiz">
+            <li class="curr">
+                <i class="ico-1"></i>
+                <p>首页</p>
+            </li>
+            <li>
+                <i class="ico-2"></i>
+                <p>自营商城</p>
+            </li>
+            <li>
+                <i class="ico-3"></i>
+                <p>联营商城</p>
+            </li>
+            <li>
+                <i class="ico-4"></i>
+                <p>购物车</p>
+            </li>
+            <li>
+                <i class="ico-5"></i>
+                <p>会员中心</p>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+  export default {
+    name: 'navigator'
+  }
+</script>
+
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file

src/views/common/Slide.vue

+<template>
+    <van-swipe :autoplay="3000000" indicator-color="#ffffff" :loop="false">
+        <van-swipe-item>
+            <img src="../../assets/images/home/banner.png" alt="" class="slide-pic">
+        </van-swipe-item>
+        <van-swipe-item>
+            <img src="../../assets/images/home/banner.png" alt="" class="slide-pic">
+        </van-swipe-item>
+    </van-swipe>
+</template>
+
+<script>
+  import Vue from 'vue';
+  import {Swipe, SwipeItem} from 'vant';
+
+  Vue.use(Swipe).use(SwipeItem);
+  export default {
+    name: 'slide',
+    data() {
+      return {
+        images: [
+          'https://img.yzcdn.cn/1.jpg',
+          'https://img.yzcdn.cn/2.jpg'
+        ]
+      }
+    }
+  }
+</script>
+
+
+<style lang="scss">
+    .slide-pic {
+        width: 100%;
+        height: 100%;
+    }
+
+    .van-swipe {
+        &__indicators {
+            left: auto;
+            right: 0.773rem;
+            bottom: 0.92rem;
+        }
+        &__indicator {
+            width: 5px;
+            height: 5px;
+            opacity: 1;
+            transition: all 0.2s ease;
+        }
+        &__indicator--active {
+            width: 13px;
+            height: 5px;
+            background-color: #ffffff;
+            border-radius: 10px;
+        }
+    }
+
+</style>
\ No newline at end of file