Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit f2601559 by hank
Options

设备 设备组ui 调整

parent d73f74e5
Showing with 166 additions and 99 deletions
src/assets/styles/common.scss 0 → 100644
.bottom-btn {
width: 588px;
height: 88px;
line-height: 88px;
margin: 0 auto;
background: rgba(255, 145, 16, 1);
border-radius: 60px;
color: white;
text-align: center;
font-size: 36px;
}
.bottom-btn-container {
background: #f7f7f7;
padding: 24px;
}
src/conpoments/device_item/index.scss
......@@ -6,6 +6,7 @@
flex-direction: row;
width: 100%;
padding: 24px;
box-sizing: border-box;
&-img-box {
width: 260px;
......@@ -26,20 +27,24 @@
flex: 1;
display: flex;
padding-left: 40px;
padding-top: 30px;
padding-top: 5px;
padding-right: 10px;
box-sizing: border-box;
flex-direction: column;
.device-item-info-name {
font-size: 32px;
font-size: 30px;
color: #333;
font-weight: bold;
margin-bottom: 20px;
}
.device-item-info-equipmentDescribe {
font-size: 28px;
color: #666;
font-size: 26px;
color: #999;
margin-bottom: 10px;
height: 75px;
overflow: hidden;
}
.device-item-info-state {
......@@ -55,10 +60,23 @@
position: absolute;
height: 18px;
left: 0;
top: 8px;
top: 9px;
width: 18px;
border-radius: 50%;
}
.isuse {
padding-left: 20px;
margin-left: 37px;
position: relative;
color: #f32b2b;
.hong {
background: #f32b2b;
color: #666;
box-shadow: 0 4px 4px 0 rgba(243, 43, 43, 0.33);
}
}
}
.device-item-info-state-active {
......@@ -67,6 +85,7 @@
.dian {
background: #5ff054;
box-shadow: 0 4px 4px 0 rgba(34, 251, 31, 0.3);
}
}
}
......
src/conpoments/device_item/index.tsx
......@@ -48,7 +48,10 @@ class DeviceItem extends Component {
>
<Text className="dian" />
{equipmentState === 'ONLINE' ? '在线' : '离线'}
<Text>{calendarId ? ' 已使用' : ''}</Text>
<Text className={calendarId ? '' : 'isuse'}>
<Text className="dian hong" />
{calendarId ? ' 已使用' : '未使用'}
</Text>
</View>
</View>
</View>
......
src/conpoments/film_list_item/index.scss
......@@ -80,8 +80,9 @@
&-setting-img {
vertical-align: top;
width: 40px;
height: 40px;
width: 25px;
height: 24px;
margin-right: 6px;
}
}
}
src/pages/home/device/device_list/index.scss
@import '@styles/var.scss';
@import '@styles/common.scss';
.device-list {
width: 100%;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
background: $bgColor;
.device-item-container {
margin: 25px;
margin-bottom: 14px;
margin-top: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
font-size: 32px;
line-height: 1.5;
border-radius: 5px;
}
&-add-btn {
right: 30px;
bottom: 200px;
width: 108px;
height: 108px;
display: flex;
color: white;
font-size: 50px;
position: absolute;
border-radius: 60px;
align-items: center;
justify-content: center;
background-color: $bgColor;
background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%);
.bottom-btn-img {
width: 42px;
height: 42px;
margin-right: 29px;
vertical-align: text-top;
}
}
&-select {
......
src/pages/home/device/device_list/index.tsx
......@@ -5,7 +5,7 @@ import { connect } from '@tarojs/redux'
import { bluetooth } from '@/common/adapter'
import ListView from '@/conpoments/list_view'
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { View, Text, Image } from '@tarojs/components'
import DeviceItem from '@/conpoments/device_item'
import { getFilmList } from '@/actions/asyncCounter'
import { WIFI_CHARACTERISTIC_ID, BLE_SERVICE_ID } from '@/common'
......@@ -210,39 +210,50 @@ class MyDevice extends Component {
<View className="device-list">
<ListView
count={count}
height={height}
height={height - 108}
dataListLength={list.length}
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
>
{list.map(item => (
<AtSwipeAction
autoClose
<View
className="device-item-container"
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '编辑',
style: {
backgroundColor: '#6190E8'
}
},
{
text: '删除',
style: {
backgroundColor: '#F32B2B'
}
}
]}
onClick={() => this.goDetail(item.equipmentId)}
>
<View onClick={() => this.goDetail(item.equipmentId)}>
<AtSwipeAction
autoClose
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '编辑',
style: {
backgroundColor: '#6190E8'
}
},
{
text: '删除',
style: {
backgroundColor: '#F32B2B'
}
}
]}
>
<DeviceItem {...item} />
</View>
</AtSwipeAction>
</AtSwipeAction>
</View>
))}
</ListView>
<View className="device-list-add-btn" onClick={this.scanCode}>
<Text className="icon">+</Text>
<View className="device-list-add-btn bottom-btn-container" onClick={this.scanCode}>
<View className="bottom-btn">
{' '}
<Image
className="bottom-btn-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/scancode.png"
/>{' '}
扫码添加设备
</View>
</View>
{/* <AtModal isOpened>
<AtModalContent>
......
src/pages/home/device/group_detail/index.scss
@import '@styles/var.scss';
@import '@styles/common.scss';
.device-list {
width: 100%;
height: 100%;
position: relative;
background: $bgColor;
display: flex;
flex-direction: column;
&-add-btn {
right: 30px;
bottom: 200px;
width: 108px;
height: 108px;
display: flex;
color: white;
font-size: 50px;
position: absolute;
border-radius: 60px;
align-items: center;
justify-content: center;
background-color: $bgColor;
background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%);
// right: 30px;
// bottom: 200px;
}
.group-item {
position: relative;
padding: 24px 24px;
// padding: 24px 24px;
margin: 24px;
margin-bottom: 14px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #333;
font-size: 32px;
line-height: 1.5;
border-radius: 5px;
&::after {
content: '';
......
src/pages/home/device/group_detail/index.tsx
......@@ -131,39 +131,44 @@ class DeviceGroup extends Component {
Taro.navigateTo({ url: `/pages/home/device/device_detail/index?equipmentId=${equipmentId}` })
}
render() {
const { count, height } = this.props
const { count } = this.props
const { windowHeight } = Taro.getSystemInfoSync()
const { list } = this.state
return (
<View className="device-list">
<ListView
count={count}
height={height}
height={windowHeight - 75}
dataListLength={list.length}
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
>
{list.map(item => (
<AtSwipeAction
autoClose
<View
className="group-item"
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '删除',
style: {
backgroundColor: '#F32B2B'
}
}
]}
onClick={() => this.goDetail(item.equipmentId)}
>
<View className="group-item" onClick={() => this.goDetail(item.equipmentId)}>
<AtSwipeAction
autoClose
key={item.equipmentId}
onClick={info => this.handleItem(item, info)}
options={[
{
text: '删除',
style: {
backgroundColor: '#F32B2B'
}
}
]}
>
<DeviceItem {...item} />
</View>
</AtSwipeAction>
</AtSwipeAction>
</View>
))}
</ListView>
<View className="device-list-add-btn" onClick={this.selectAddDevice}>
<Text className="icon">+</Text>
<View className="device-list-add-btn bottom-btn-container" onClick={this.selectAddDevice}>
<View className="bottom-btn">从设备列表添加</View>
</View>
</View>
)
......
src/pages/home/device/group_device_bind/index.scss
@import '@styles/var.scss';
@import '@styles/common.scss';
@import '~taro-ui/dist/style/components/search-bar.scss';
@import '~taro-ui/dist/style/components/button.scss';
@import '~taro-ui/dist/style/components/icon.scss';
......@@ -8,13 +9,20 @@
height: 100%;
display: flex;
flex-direction: column;
background: $bgColor;
.device-bind-item-container {
margin: 10px 24px 14px;
background: white;
border-radius: 5px;
}
&-scroll {
flex: 1;
height: calc(100vh - 200px);
height: calc(100vh - 300px);
&-view {
height: calc(100vh - 200px);
height: calc(100vh - 300px);
}
}
......@@ -40,15 +48,11 @@
flex: 1;
}
.enter {
display: inline-block;
width: 150px;
.bottom-btn-top {
font-size: 36px;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
padding: 0 20px;
display: flex;
align-items: center;
// flex-direction: row;
justify-content: space-between;
}
}
src/pages/home/device/group_device_bind/index.tsx
......@@ -167,7 +167,7 @@ class DeviceSelect extends Component {
<View className="device-bind-scroll">
<ScrollView className="device-bind-scroll-view" scrollY>
{list.map(item => (
<View key={item.equipmentId}>
<View className="device-bind-item-container" key={item.equipmentId}>
<Label className="device-bind-item" onClick={() => this.changeItem(item)}>
<Checkbox
value=""
......@@ -182,13 +182,16 @@ class DeviceSelect extends Component {
))}
</ScrollView>
</View>
<View className="device-bind-bottom-bar">
<Text className="all" onClick={this.changeAllCheck}>
全选，共选择{size}台
</Text>
<Button className="enter" onClick={this.updateBind}>
<View className="device-bind-bottom-bar bottom-btn-container ">
<View className="bottom-btn-top">
<Text className="all" onClick={this.changeAllCheck}>
全选
</Text>
<Text>共选择{size}台</Text>
</View>
<View className="bottom-btn" onClick={this.updateBind}>
确定
</Button>
</View>
</View>
</View>
)
......
src/pages/home/device/group_list/index.tsx
......@@ -195,7 +195,7 @@ class DeviceGroup extends Component {
<View className="device-list">
<ListView
count={count}
height={height - 108}
height={height - 100}
dataListLength={list.length}
pullingUp={done => this.pullingUp(done)}
pullingDown={done => this.pullingDown(done)}
......
src/pages/home/device/index.tsx
......@@ -53,19 +53,19 @@ class Device extends Component {
<AtTabsPane current={current} index={0}>
<View style={{ height: `${windowHeight}px` }}>
<View className="hui" />
<DeviceList height={windowHeight} />
<DeviceList height={windowHeight - 10} />
</View>
</AtTabsPane>
<AtTabsPane className="at-tabs-page" current={current} index={1}>
<View style={{ height: `${windowHeight}px` }}>
<View className="hui" />
<DeviceGroup height={windowHeight} />
<DeviceGroup height={windowHeight - 10} />
</View>
</AtTabsPane>
<AtTabsPane className="at-tabs-page" current={current} index={2}>
<View style={{ height: `${windowHeight}px` }}>
<View className="hui" />
<ShopList height={windowHeight} />
<ShopList height={windowHeight - 10} />
</View>
</AtTabsPane>
</AtTabs>
......
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