定制化模板

src/views/device/detail.vue

@@ -26,7 +26,7 @@
               </div>
               <div class="bottom">
                  <span>在线</span>
-                 <span class="p-btn">[修改]</span>
+                 <span class="p-btn">[离线该设备]</span>
                  <span class="del-btn">[解除绑定]</span>
               </div>
           </div>

src/views/tempaltes/index.vue

@@ -3,13 +3,13 @@
     <NavBar title="模板库" ></NavBar>
     <div class="static-top">
         <div class="tab-btn">
-            <div class="tab-btn-item" :class="index === 0 ? 'active' : ''" @click="changeBtn(0)">
+            <div class="tab-btn-item" :class="activeIndex === 0 ? 'active' : ''" @click="changeBtn(0)">
               公共模板
             </div>
             <div class="tab-btn-diver">
               |
             </div>
-            <div class="tab-btn-item" :class="index === 1 ? 'active' : ''" @click="changeBtn(1)">
+            <div class="tab-btn-item" :class="activeIndex === 1 ? 'active' : ''" @click="changeBtn(1)">
               我的模板
             </div>
         </div>
@@ -35,6 +35,24 @@
     <div class="template-list">
         <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
           <!-- slides -->
+          <swiper-slide  @click.native="showCustom" v-if="activeIndex===1">
+            <div class="template-item">
+              <div class="template-item-top" :style="{
+                'background-image': 'url(./img/ps/custom.png)' 
+              }">
+                <div class="tag">推荐</div>
+              </div>
+              <div class="template-item-bottom">
+                <div class="template-item-title">定制化模板</div>
+                <div class="template-item-tips">
+                  为您量身打造最合适的可视化方案
+                </div>
+                <div>
+                  <img src="../../../public/img/ps/up.png" alt="">
+                </div>
+              </div>
+            </div>
+          </swiper-slide>
           <swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
             <div class="template-item">
               <div class="template-item-top" :style="{
@@ -43,10 +61,14 @@
                 <div class="tag">推荐</div>
               </div>
               <div class="template-item-bottom">
-                <div class="template-item-title">{{item.templateName}}</div>
+                <div class="template-item-title" v-show="activeIndex === 0">{{item.templateName}}</div>
+                <div class="template-item-title" v-show="activeIndex === 1">{{item.filmName ? item.filmName : '暂无名称'}}</div>
                 <div class="template-item-tips">
                   为您量身打造最合适的可视化方案
                 </div>
+                <div>
+                  <img src="../../../public/img/ps/up.png" alt="">
+                </div>
               </div>
             </div>
           </swiper-slide>
@@ -57,7 +79,38 @@
             <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
         </swiper>
     </div>
-    
+      <van-dialog
+        style="width: 50%"
+        v-model="show"
+        title="请留下您的联系方式，我们将在24小时与您联系"
+        show-cancel-button
+      >
+        <div class="dialog-content">
+          <van-cell-group>
+            <van-field
+              v-model="username"
+              required
+              clearable
+              label="手机号"
+              placeholder="请输入手机号"
+            />
+            <van-field
+              v-model="password"
+              type="password"
+              label="验证码"
+              placeholder="请输入验证码"
+              required
+            />
+            <van-field
+              v-model="password"
+              type="password"
+              label="公司名称"
+              placeholder="请输入公司名称"
+              required
+            />
+          </van-cell-group>
+        </div>
+      </van-dialog>
   </div>
 </template>
 
@@ -74,7 +127,8 @@ export default {
         slidesPerView: 'auto'
 
       },
-      index: 0,
+      show: false,
+      activeIndex: 0,
       list: [
         // { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
         // { templateName: '1', templateUrl: "http://visual-clouds.bdideal.com/html/1560506687401a2e66e46b6ac4f71bae6429994fd1a99.jpg" },
@@ -101,7 +155,7 @@ export default {
 
     },
     changeBtn(index) {
-      this.index = index
+      this.activeIndex = index
       if( index == 0 ) {
         this.getList()
       } else {
@@ -135,6 +189,9 @@ export default {
           templateId: item.templateId
         }
       })
+    },
+    showCustom() {
+      this.show = true	
     }
   },
   components: {
@@ -231,10 +288,20 @@ export default {
           color:rgba(51,51,51,.8);
         }
         background:rgba(255,255,255,1);
+        img {
+          padding-top: 30px;
+          width:21px;
+          height:9px;
+        }
       }
     }
 
   }
-
+  .dialog-content {
+    height: 240px;
+    padding-top: 100px;
+    width: 50%;
+    margin: 0px auto;
+  }
 }
 </style>