feat：goods-detail swiper轮播图组件添加

src/components/Vant/index.js

@@ -25,7 +25,8 @@ import {
   PullRefresh,
   TreeSelect,
   Icon,
-  Progress
+  Progress,
+  ImagePreview
 } from 'vant'
 
 Vue.use(Toast)
@@ -52,3 +53,4 @@ Vue.use(Toast)
   .use(TreeSelect)
   .use(Icon)
   .use(Progress)
+  .use(ImagePreview)

src/icons/svg/backtop.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1584781899216" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3410" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><defs><style type="text/css"></style></defs><path d="M512.71932 73.09934c241.717266 0 439.476629 197.211553 439.476629 438.247896 0 241.036343-197.790082 438.206939-439.476629 438.206939-241.717266 0-439.476629-197.170596-439.476628-438.212059 0-241.036343 197.759363-438.247896 439.476628-438.247896m0-73.037903C227.039033 0.056317 0 233.786822 0 511.342116c0 277.524576 227.039033 511.255081 512.71932 511.255081 285.680288 0 512.688602-226.393948 512.688603-511.255081C1025.413042 226.450265 798.404728 0.056317 512.72444 0.056317z m51.233023 803.416932v-394.423107l175.81113 175.334997 65.911255-73.037903-292.950288-292.166971L219.738314 511.342116l65.941974 73.037903 175.739454-175.329877v394.423107h102.532601z" p-id="3411" fill="#515151"></path></svg>
+<svg class="icon" viewBox="0 0 1025 1024" xmlns="http://www.w3.org/2000/svg" width="200.195" height="200"><defs><style/></defs><path d="M512.72 73.1c241.717 0 439.476 197.21 439.476 438.247s-197.79 438.207-439.477 438.207c-241.717 0-439.476-197.17-439.476-438.212 0-241.036 197.76-438.248 439.476-438.248m0-73.038C227.04.056 0 233.786 0 511.342c0 277.525 227.039 511.255 512.72 511.255 285.68 0 512.688-226.394 512.688-511.255C1025.413 226.45 798.405.056 512.724.056zm51.233 803.417V409.05l175.811 175.335 65.912-73.038-292.95-292.167-292.987 292.162 65.942 73.038 175.74-175.33v394.423h102.532z"/></svg>

src/icons/svg/share.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M823.8 696.294c-44.977 0-85.864 17.718-114.483 49.064L350.876 536.834c4.09-16.354 4.09-32.709 0-49.063l358.44-207.16c28.62 31.347 69.507 50.427 114.484 50.427 87.225-1.363 152.645-66.783 154.006-154.008-1.361-87.225-66.78-154.006-154.006-155.368-87.225 1.362-154.008 68.143-155.37 155.37 0 9.539 1.362 19.08 2.727 28.62L315.441 410.087c-28.62-31.346-68.145-51.79-115.846-51.79-87.225 1.362-154.007 66.782-155.37 154.007 1.363 87.225 68.145 152.645 155.37 154.006 44.976 0 87.225-20.443 115.846-51.79l355.716 205.798c-1.363 9.54-2.727 19.08-2.727 29.983 1.362 87.227 68.145 152.645 155.37 154.008 87.225-1.363 152.645-66.78 154.006-154.008-1.361-87.225-66.78-152.645-154.006-154.006z"/></svg>

src/router/index.js

@@ -4,6 +4,12 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
+  // 登录
+  {
+    path: '/login',
+    name: 'Login',
+    component: () => import('@/views/auth/login')
+  },
   // 首页
   {
     path: '*',
@@ -15,15 +21,6 @@ const routes = [
       showTab: true
     }
   },
-  // 登录
-  {
-    path: '/login',
-    name: 'Login',
-    component: () => import('@/views/auth/login'),
-    meta: {
-      showTab: true
-    }
-  },
   // 分类
   {
     path: '/category',
@@ -41,6 +38,12 @@ const routes = [
     path: '/product',
     name: 'Product',
     component: () => import('@/views/product')
+  },
+  // 商品详情
+  {
+    path: '/detail',
+    name: 'Detail',
+    component: () => import('@/views/detail')
   }
 ]
 

src/styles/variables.scss

@@ -41,4 +41,5 @@ $mini: 20px;
 :export {
   theme: $theme;
   black: $black;
+  red: $red
 }

src/views/detail/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="detail">
+    <nav-bar title="商品详情">
+      <span style="color:#333">
+        <svg-icon icon-class="share" :width="15" :height="15" />
+      </span>
+    </nav-bar>
+
+    <Swiper :banner="banner" />
+
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar'
+import Swiper from './modules/Swiper'
+
+export default {
+  name: 'Detail',
+  components: {
+    Swiper,
+    NavBar
+  },
+  data() {
+    return {
+      banner: [
+        'http://img3m4.ddimg.cn/32/35/23579654-1_e_3.jpg',
+        'http://img3m4.ddimg.cn/32/35/23579654-2_e_5.jpg',
+        'http://img3m4.ddimg.cn/32/35/23579654-3_e_3.jpg'
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.detail {
+}
+</style>

src/views/detail/modules/Swiper.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <van-swipe :autoplay="3000" :indicator-color="variables.red">
+      <van-swipe-item v-for="(image, index) in banner" :key="index">
+        <image-pic width="100%" height="400" :src="image" />
+      </van-swipe-item>
+    </van-swipe>
+  </div>
+</template>
+
+<script>
+import variables from '@/styles/variables.scss'
+
+export default {
+  props: ['banner'],
+  computed: {
+    variables() {
+      return variables
+    }
+  }
+}
+</script>