Skip to content

visualcloud / Vmatrix-client

Go to a project
Commit 3fbc67e1 by hank
Options

设备详情

parent 762235a7
Showing with 149 additions and 9 deletions
src/views/device/detail.vue
<template> <template>
<div class="device-detail-container"> <div class="device-detail-container">
<NavBar title="商场导览" <NavBar title="设备详情"
left-arrow></NavBar> left-arrow></NavBar>
<div class="content-box"> <div class="content-box">
<div class="device-detail-top"> <div class="device-detail-top">
...@@ -36,7 +36,22 @@ ...@@ -36,7 +36,22 @@
<div class="template-item" :style="{ <div class="template-item" :style="{
'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')' 'background-image': 'url(' + (item.templateUrl ? item.templateUrl : '../../img/ps/box.png') + ')'
}"> }">
<div class="item-action">
<div class="name">
{{item.templateName}}
</div>
<div class="right-action">
<div class="right-item-action">
<van-icon name="exchange" />
</div>
<div class="right-item-action">
<van-icon name="edit" />
</div>
<div class="right-item-action">
<van-icon name="delete" />
</div>
</div>
</div>
</div> </div>
</swiper-slide> </swiper-slide>
<!-- Optional controls --> <!-- Optional controls -->
...@@ -48,6 +63,39 @@ ...@@ -48,6 +63,39 @@
</swiper> </swiper>
</div> </div>
<div class="device-history-use">
<div class="title-tip">
最近使用模板
</div>
<swiper :options="swiperOption"
ref="mySwiper2"
@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 class="item-action">
<div class="name">
{{item.templateName}}
</div>
</div>
</div>
<div class="template-item-bottom">
<div class="action-btn">
应用
</div>
</div>
</swiper-slide>
<!-- Optional controls -->
<!-- <div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div> -->
<!-- <div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div> -->
</swiper>
</div>
</div> </div>
</div> </div>
...@@ -142,7 +190,7 @@ export default { ...@@ -142,7 +190,7 @@ export default {
text-align: left; text-align: left;
.swiper-container { .swiper-container {
position: relative; position: relative;
width: 1150px; width: 1185px;
margin: 0; margin: 0;
} }
...@@ -156,23 +204,32 @@ export default { ...@@ -156,23 +204,32 @@ export default {
.title-tip { .title-tip {
font-size: 24px; font-size: 24px;
color: #333333; color: #333333;
padding-top: 47.5px;
padding-bottom: 19.5px; padding-bottom: 19.5px;
font-weight: bold;
} }
.device-detail-top { .device-detail-top {
width: 178.5px;
height: 114.5px;
border: 1px solid rgba(132, 132, 132, 1);
.icon { .icon {
width: 100%; width: 178.5px;
height: 114.5px;
border: 1px solid rgba(132, 132, 132, 1);
display: flex;
align-items: center;
text-align: center;
justify-content: center;
img {
width:151px;
height:92px;
}
} }
} }
.device-detail-use { .device-detail-use {
position: relative; position: relative;
.add { .add {
position: absolute; position: absolute;
right: 50px; right: 50px;
top: 200px; top: 250px;
width: 50px; width: 50px;
color: white; color: white;
background: #000; background: #000;
...@@ -185,7 +242,90 @@ export default { ...@@ -185,7 +242,90 @@ export default {
width: 575px; width: 575px;
height: 351px; height: 351px;
margin-right: 34.5px; margin-right: 34.5px;
background-size: cover;
position: relative;
.item-action {
position: absolute;
left: 0;
right: 0;
bottom: 15px;
height: 42px;
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 21px;
color: white;
padding-left: 30px;
}
.right-action {
display: flex;
.right-item-action {
width:42px;
height:42px;
display: flex;
justify-content: center;
align-items: center;
background:rgba(255,255,255,0.14);
color: white;
font-size: 25px;
border-radius:50%;
margin: 0 12.5px;
}
padding-right: 22.5px;
}
}
}
}
.device-history-use {
position: relative;
.template-item {
width: 130px;
height: 73px;
margin-right: 7px;
background-size: cover;
position: relative;
.item-action {
position: absolute;
left: 0;
right: 0;
bottom: 8px;
display: flex;
justify-content: space-between;
align-items: center;
.name {
font-size: 21px;
color: white;
padding-left: 13.5px;
}
}
}
.template-item:hover {
&+.template-item-bottom {
display: flex;
}
}
.template-item-bottom {
justify-content: center;
align-items: center;
width: 130px;
height: 38.5px;
display: flex;
display: none;
border: 1px solid #7386F9;
border-top: none;
box-sizing: border-box;
.action-btn {
background:linear-gradient(0deg,rgba(0,0,0,1) 0%,rgba(128,115,247,1) 0%,rgba(94,160,251,1) 100%);
border-radius:3px;
text-align: center;
font-size: 15px;
width:83px;
color: white;
height:22.5px;
line-height:22.5px;
}
} }
} }
} }
......
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