Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 417e5935 by hank
Options

定制化模板

parent f74422d7
Showing with 75 additions and 8 deletions
src/views/device/detail.vue
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
</div> </div>
<div class="bottom"> <div class="bottom">
<span>在线</span> <span>在线</span>
<span class="p-btn">[修改]</span> <span class="p-btn">[离线该设备]</span>
<span class="del-btn">[解除绑定]</span> <span class="del-btn">[解除绑定]</span>
</div> </div>
</div> </div>
......
src/views/tempaltes/index.vue
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<NavBar title="模板库" ></NavBar> <NavBar title="模板库" ></NavBar>
<div class="static-top"> <div class="static-top">
<div class="tab-btn"> <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>
<div class="tab-btn-diver"> <div class="tab-btn-diver">
| |
</div> </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>
</div> </div>
...@@ -35,6 +35,24 @@ ...@@ -35,6 +35,24 @@
<div class="template-list"> <div class="template-list">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<!-- slides --> <!-- 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)"> <swiper-slide v-for="(item, index) in list" :key="index" @click.native="goDetail(item)">
<div class="template-item"> <div class="template-item">
<div class="template-item-top" :style="{ <div class="template-item-top" :style="{
...@@ -43,10 +61,14 @@ ...@@ -43,10 +61,14 @@
<div class="tag">推荐</div> <div class="tag">推荐</div>
</div> </div>
<div class="template-item-bottom"> <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 class="template-item-tips">
为您量身打造最合适的可视化方案 为您量身打造最合适的可视化方案
</div> </div>
<div>
<img src="../../../public/img/ps/up.png" alt="">
</div>
</div> </div>
</div> </div>
</swiper-slide> </swiper-slide>
...@@ -57,7 +79,38 @@ ...@@ -57,7 +79,38 @@
<div class="swiper-scrollbar" slot="scrollbar"></div> --> <div class="swiper-scrollbar" slot="scrollbar"></div> -->
</swiper> </swiper>
</div> </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> </div>
</template> </template>
...@@ -74,7 +127,8 @@ export default { ...@@ -74,7 +127,8 @@ export default {
slidesPerView: 'auto' slidesPerView: 'auto'
}, },
index: 0, show: false,
activeIndex: 0,
list: [ 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" },
...@@ -101,7 +155,7 @@ export default { ...@@ -101,7 +155,7 @@ export default {
}, },
changeBtn(index) { changeBtn(index) {
this.index = index this.activeIndex = index
if( index == 0 ) { if( index == 0 ) {
this.getList() this.getList()
} else { } else {
...@@ -135,6 +189,9 @@ export default { ...@@ -135,6 +189,9 @@ export default {
templateId: item.templateId templateId: item.templateId
} }
}) })
},
showCustom() {
this.show = true
} }
}, },
components: { components: {
...@@ -231,10 +288,20 @@ export default { ...@@ -231,10 +288,20 @@ export default {
color:rgba(51,51,51,.8); color:rgba(51,51,51,.8);
} }
background:rgba(255,255,255,1); 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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment