You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
196 lines
6.2 KiB
196 lines
6.2 KiB
<template>
|
|
<view class="device-manage">
|
|
<store-name></store-name>
|
|
<view class="dm-tit">售货柜管理</view>
|
|
<view class="dm-list">
|
|
<view class="dl-item" v-for="i in 10" :key="i">
|
|
<view class="di-header">
|
|
<image></image>
|
|
<view class="dh-name">欧轩智能测试柜-01</view>
|
|
<view class="dh-test-btn">
|
|
<image></image>
|
|
<view>测试</view>
|
|
</view>
|
|
</view>
|
|
<view class="di-section">
|
|
<view class="ds-stock">
|
|
<view>库存：<text class="active">充足</text></view>
|
|
<view>补货</view>
|
|
</view>
|
|
<view class="ds-contral">
|
|
<view>
|
|
设备：<text class="active">离线</text>
|
|
</view>
|
|
<view>更新</view>
|
|
<view class="active">
|
|
<text>开启售货</text>
|
|
<image></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import store_name from '../../components/store_name/store_name';
|
|
const dmObj = {
|
|
'd7': {
|
|
id: 7,
|
|
name: '',
|
|
isTestBtn: true,
|
|
testBtnIcon: '',
|
|
testBtnName: '测试',
|
|
isShowStock: true,
|
|
stockBtnName: '补货',
|
|
deviceBtnOpenName: '开启售货',
|
|
deviceBtnStopName: '停止售货',
|
|
}
|
|
}
|
|
export default {
|
|
components: {
|
|
'store-name': store_name
|
|
},
|
|
onLoad(options){
|
|
console.log(options)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '~style/public.scss';
|
|
.dm-tit{
|
|
padding: 50upx 40upx 30upx;
|
|
line-height: 60upx;
|
|
font-weight: 500;
|
|
font-size: 44upx;
|
|
color: #333;
|
|
}
|
|
.dm-list{
|
|
padding: 0 40upx;
|
|
.dl-item{
|
|
margin-bottom: 30upx;
|
|
background-color: #fff;
|
|
}
|
|
.di-header{
|
|
padding: 24upx 20upx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 2upx solid #D8D8D8;
|
|
>image{
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
margin-right: 20upx;
|
|
width: 80upx;
|
|
height: 80upx;
|
|
background-color: skyblue;
|
|
}
|
|
.dh-name{
|
|
flex-grow: 1;
|
|
font-size: 32upx;
|
|
line-height: 44upx;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.dh-test-btn{
|
|
flex-shrink: 0;
|
|
margin-left: 20upx;
|
|
>image{
|
|
display: block;
|
|
margin: 0 auto 8upx;
|
|
width: 36upx;
|
|
height: 36upx;
|
|
background-color: grey;
|
|
}
|
|
>view{
|
|
text-align: center;
|
|
line-height: 34upx;
|
|
font-size: 24upx;
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
.di-section{
|
|
padding: 30upx 20upx;
|
|
.ds-stock{
|
|
margin-bottom: 40upx;
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
font-size: 26upx;
|
|
line-height: 36upx;
|
|
color: #9A9A9D;
|
|
>text{
|
|
color: #EA5061;
|
|
&.active{
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
&:nth-child(2){
|
|
width: 140upx;
|
|
height: 56upx;
|
|
text-align: center;
|
|
line-height: 56upx;
|
|
font-size: 28upx;
|
|
color: #fff;
|
|
border-radius: 10upx;
|
|
background-color: $themeColor;
|
|
}
|
|
}
|
|
|
|
}
|
|
.ds-contral{
|
|
@include centerFlex(space-between);
|
|
>view{
|
|
&:first-child{
|
|
font-size: 26upx;
|
|
line-height: 36upx;
|
|
color: #9A9A9D;
|
|
>text{
|
|
color: #333333;
|
|
&.active{
|
|
color: $themeColor;
|
|
}
|
|
}
|
|
}
|
|
&:nth-child(2){
|
|
margin-left: 28upx;
|
|
width: 116upx;
|
|
height: 46upx;
|
|
line-height: 42upx;
|
|
text-align: center;
|
|
border: 2upx solid $themeColor;
|
|
border-radius: 25upx;
|
|
font-size: 24upx;
|
|
color: $themeColor;
|
|
}
|
|
&:nth-child(3){
|
|
padding: 0 18upx;
|
|
height: 56upx;
|
|
line-height: 52upx;
|
|
text-align: center;
|
|
font-size: 28upx;
|
|
color: $themeColor;
|
|
border: 2upx solid $themeColor;
|
|
border-radius: 10upx;
|
|
>image{
|
|
margin-left: 6upx;
|
|
vertical-align: middle;
|
|
width: 32upx;
|
|
height: 32upx;
|
|
background-color: red;
|
|
}
|
|
&.active{
|
|
border-color: #EA5061;
|
|
color: #EA5061;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|