设备详情

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import Router from 'vue-router'
 import Home from '@/views/Home.vue'
 import Home from '@/views/Home.vue'
 import Device from  '@/views/device/index.vue'
 import Device from  '@/views/device/index.vue'
+import DeviceDetail from  '@/views/device/detail.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
 import Tempaltes from  '@/views/tempaltes/index.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 import TempalteEdit from  '@/views/tempaltes/edit.vue'
 Vue.use(Router)
 Vue.use(Router)
@@ -17,6 +18,7 @@ const router =  new Router({
         { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
         { path: '/tempaltes/edit', name: 'TempaltesEdit', component: TempalteEdit, meta: { keepAlive: true } },
         { path: '/devices', name: 'Home', component: Home, meta: { keepAlive: true } },
         { path: '/devices', name: 'Home', component: Home, meta: { keepAlive: true } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
         { path: '/device', name: 'Device', component: Device, meta: { keepAlive: true } },
+        { path: '/device/detail', name: 'DeviceDetail', component: DeviceDetail, meta: { keepAlive: true } },
         { path: '/user', name: 'Home', component: Home, meta: { keepAlive: true } },
         { path: '/user', name: 'Home', component: Home, meta: { keepAlive: true } },
       ]
       ]
     },
     },

src/views/device/detail.vue

+<template>
+  <div class="device-detail-container">
+    <NavBar title="商场导览"
+            left-arrow></NavBar>
+    <div class="content-box">
+      <div class="device-detail-top">
+        <div class="icon">
+          <img src="../../../public/img/ps/box.png"
+               alt="">
+        </div>
+        <div class="right-container">
+          <div class="right-item">
+
+          </div>
+          <div class="right-item">
+
+          </div>
+          <div class="right-item">
+
+          </div>
+        </div>
+      </div>
+      <div class="device-detail-use">
+        <div class="title-tip">
+          当前使用模版
+        </div>
+         <div class="add">
+              <van-icon name="plus" />
+         </div>
+        <swiper :options="swiperOption"
+                ref="mySwiper"
+                @someSwiperEvent="callback">
+          <!-- slides -->
+          <swiper-slide v-for="(item, index) in list"
+                        :key="index">
+            <div class="template-item" :style="{
+                'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')'
+              }">
+
+            </div>
+          </swiper-slide>
+          <!-- Optional controls -->
+          <!-- <div class="swiper-pagination"  slot="pagination"></div>
+            <div class="swiper-button-prev" slot="button-prev"></div>
+            <div class="swiper-button-next" slot="button-next"></div>
+            <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
+           
+        </swiper>
+
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import NavBar from "@/views/layout/navbar";
+import "swiper/dist/css/swiper.css";
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+export default {
+  data() {
+    return {
+      swiperOption: {
+        slidesPerView: "auto"
+      },
+      list: [
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        },
+        {
+          templateName: "1",
+          templateUrl:
+            "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg"
+        }
+      ]
+    };
+  },
+  components: {
+    NavBar,
+    swiper,
+    swiperSlide
+  },
+  computed: {
+    swiper() {
+      return this.$refs.mySwiper.swiper;
+    }
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    callback() {},
+    getList() {
+      // getTempalteList().then(res => {
+      //   console.log(res)
+      //   this.list = res.data.list
+      // })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.device-detail-container {
+  text-align: left;
+  .swiper-container {
+    position: relative;
+    width: 1150px;
+    margin: 0;
+    
+  }
+  .swiper-slide {
+    width: auto;
+  }
+  .content-box {
+    padding-left: 51px;
+    padding-top: 56px;
+  }
+  .title-tip {
+    font-size: 24px;
+    color: #333333;
+    padding-bottom: 19.5px;
+  }
+  .device-detail-top {
+
+    width: 178.5px;
+    height: 114.5px;
+    border: 1px solid rgba(132, 132, 132, 1);
+    .icon {
+      width: 100%;
+    }
+  }
+  .device-detail-use {
+    position: relative;
+    .add {
+      position: absolute;
+      right: 50px;
+      top: 200px;
+      width: 50px;
+      color: white;
+      background: #000;
+      height: 50px;
+      line-height: 55px;
+      text-align: center;
+      border-radius: 50%;
+    }
+    .template-item {
+      width: 575px;
+      height: 351px;
+      margin-right: 34.5px;
+
+    }
+  }
+}
+</style>