Commit 3fbc67e1 by hank

设备详情

parent 762235a7
<template>
<div class="device-detail-container">
<NavBar title="商场导览"
<NavBar title="设备详情"
left-arrow></NavBar>
<div class="content-box">
<div class="device-detail-top">
......@@ -36,7 +36,22 @@
<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 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>
</swiper-slide>
<!-- Optional controls -->
......@@ -48,6 +63,39 @@
</swiper>
</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>
......@@ -142,7 +190,7 @@ export default {
text-align: left;
.swiper-container {
position: relative;
width: 1150px;
width: 1185px;
margin: 0;
}
......@@ -156,23 +204,32 @@ export default {
.title-tip {
font-size: 24px;
color: #333333;
padding-top: 47.5px;
padding-bottom: 19.5px;
font-weight: bold;
}
.device-detail-top {
.icon {
width: 178.5px;
height: 114.5px;
border: 1px solid rgba(132, 132, 132, 1);
.icon {
width: 100%;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
img {
width:151px;
height:92px;
}
}
}
.device-detail-use {
position: relative;
.add {
position: absolute;
right: 50px;
top: 200px;
top: 250px;
width: 50px;
color: white;
background: #000;
......@@ -185,8 +242,91 @@ export default {
width: 575px;
height: 351px;
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;
}
}
}
}
</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