Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit f2601559 by hank
Options

设备 设备组ui 调整

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