Skip to content

visualcloud / Vmatrix-client-taro

Go to a project
Commit d73f74e5 by hank
Options

修改设备添加 界面 设备组

parent 21be16cc
Showing with 177 additions and 57 deletions
src/assets/styles/var.scss
...@@ -37,6 +37,6 @@ $primary-text-color: #333; ...@@ -37,6 +37,6 @@ $primary-text-color: #333;
} }
.hui { .hui {
height: 10px; height: 18px;
background: $bgColor; background: $bgColor;
} }
src/conpoments/film_list_item/index.scss
...@@ -7,36 +7,75 @@ ...@@ -7,36 +7,75 @@
background-color: white; background-color: white;
&-img-box { &-img-box {
width: 320px; width: 261px;
background: $bgColor;
text-align: center;
position: relative;
.films-item-img-bg {
width: 261px;
height: 261px;
position: absolute;
z-index: -1;
filter: blur(10px);
}
.films-item-img { .films-item-img {
width: 100%; width: 100%;
height: 180px; height: 158px;
}
.films-item-img2 {
width: 146px;
height: 261px;
} }
} }
&-info { &-info {
flex: 1; flex: 1;
display: flex; display: flex;
padding-left: 20px; padding-left: 15px;
flex-direction: column; flex-direction: column;
&-name { &-name {
font-size: 32px; font-size: 32px;
color: #333; color: #333;
margin-bottom: 30px; margin-bottom: 15px;
}
&-detail {
height: 55px;
overflow: hidden;
font-size: 22px;
color: #666;
margin-bottom: 15px;
} }
&-count { &-count {
font-size: 22px; font-size: 22px;
color: #666; color: #666;
flex: 300px;
}
&-time {
font-size: 26px;
color: #666;
display: flex;
justify-content: space-between;
align-items: center;
} }
&-setting { &-setting {
margin-top: 10px; // width: 300px;
width: 300px; padding-right: 30px;
font-size: 26px;
font-weight: 500;
color: rgba(114, 114, 114, 1);
text-align: right; text-align: right;
height: 40px; height: 40px;
display: flex;
align-items: center;
justify-content: right;
} }
&-setting-img { &-setting-img {
......
src/conpoments/film_list_item/index.tsx
...@@ -14,6 +14,8 @@ interface PageOwnProps extends IMilmListItme { ...@@ -14,6 +14,8 @@ interface PageOwnProps extends IMilmListItme {
isChoose?: boolean isChoose?: boolean
updateTime?: string updateTime?: string
onSetting?: () => void onSetting?: () => void
filmDescribe?: string
templateShow?: string
} }
type PageState = {} type PageState = {}
...@@ -27,30 +29,55 @@ interface FilmListItem { ...@@ -27,30 +29,55 @@ interface FilmListItem {
class FilmListItem extends Component { class FilmListItem extends Component {
render() { render() {
let { templateUrl, filmName, updateTime, onClick, isChoose, onSetting } = this.props let {
templateUrl,
filmName,
updateTime,
onClick,
isChoose,
onSetting,
filmDescribe,
templateShow
} = this.props
templateUrl = templateUrl || '' templateUrl = templateUrl || ''
return ( return (
<View className="films-item" onClick={() => onClick && onClick()}> <View className="films-item" onClick={() => onClick && onClick()}>
<View className="films-item-img-box"> <View className="films-item-img-box">
<Image className="films-item-img" src={templateUrl.split(',')[0]} /> {/* {templateShow === 'HORIZONTAL' ? null : (
<View
className="films-item-img-bg"
style={`background: url(${templateUrl.split(',')[0]}) no-repeat cover;` + ''}
/>
)} */}
<Image
className={
templateShow === 'HORIZONTAL' ? 'films-item-img' : 'films-item-img films-item-img2'
}
src={templateUrl.split(',')[0]}
/>
</View> </View>
<View className="films-item-info"> <View className="films-item-info">
<Text className="films-item-info-name">{filmName}</Text> <Text className="films-item-info-name">{filmName}</Text>
{isChoose ? null : <Text className="films-item-info-count">{updateTime}</Text>} <Text className="films-item-info-detail">{filmDescribe}</Text>
<View className="films-item-info-time">
<Text className="films-item-info-count">{updateTime}</Text>
{isChoose ? null : ( {isChoose ? null : (
<View className="films-item-info-setting"> <View
管理 className="films-item-info-setting"
<Image
className="films-item-info-setting-img"
onClick={() => { onClick={() => {
onSetting && onSetting() onSetting && onSetting()
}} }}
>
<Image
className="films-item-info-setting-img"
src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/manager.png" src="https://visual-clouds.oss-cn-beijing.aliyuncs.com/miniprogram/manager.png"
/> />
管理
</View> </View>
)} )}
</View> </View>
</View> </View>
</View>
) )
} }
} }
......
src/pages/home/device/device_list/index.tsx
...@@ -230,7 +230,7 @@ class MyDevice extends Component { ...@@ -230,7 +230,7 @@ class MyDevice extends Component {
{ {
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#FF4949' backgroundColor: '#F32B2B'
} }
} }
]} ]}
......
src/pages/home/device/film_list/index.tsx
...@@ -126,7 +126,7 @@ class Films extends Component { ...@@ -126,7 +126,7 @@ class Films extends Component {
{ {
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#FF4949' backgroundColor: '#F32B2B'
} }
} }
]} ]}
......
src/pages/home/device/group_detail/index.tsx
...@@ -151,7 +151,7 @@ class DeviceGroup extends Component { ...@@ -151,7 +151,7 @@ class DeviceGroup extends Component {
{ {
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#FF4949' backgroundColor: '#F32B2B'
} }
} }
]} ]}
......
src/pages/home/device/group_list/index.scss
...@@ -4,16 +4,21 @@ ...@@ -4,16 +4,21 @@
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; width: 108px;
height: 108px; height: 108px;
margin: 0 auto;
line-height: 100px;
display: flex; display: flex;
color: white; color: white;
font-size: 50px; font-size: 50px;
position: absolute; // position: absolute;
border-radius: 60px; border-radius: 60px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
...@@ -21,14 +26,21 @@ ...@@ -21,14 +26,21 @@
background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%); background-image: linear-gradient(176deg, #ffab20 0%, #ff720e 97%);
} }
.group-item-container {
margin: 15px 24px;
}
.group-item { .group-item {
position: relative; position: relative;
padding: 30px 24px; height: 100px;
line-height: 100px;
padding-left: 26px;
background: rgba(255, 255, 255, 1);
border-radius: 5px;
-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: 30px;
line-height: 1.5;
&::after { &::after {
content: ''; content: '';
......
src/pages/home/device/group_list/index.tsx
...@@ -195,12 +195,13 @@ class DeviceGroup extends Component { ...@@ -195,12 +195,13 @@ class DeviceGroup 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 key={item.equipmentId} className="group-item-container">
<AtSwipeAction <AtSwipeAction
autoClose autoClose
key={item.equipmentId} key={item.equipmentId}
...@@ -209,13 +210,13 @@ class DeviceGroup extends Component { ...@@ -209,13 +210,13 @@ class DeviceGroup extends Component {
{ {
text: '编辑', text: '编辑',
style: { style: {
backgroundColor: '#6190E8' backgroundColor: '#999'
} }
}, },
{ {
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#FF4949' backgroundColor: '#F32B2B'
} }
} }
]} ]}
...@@ -229,6 +230,7 @@ class DeviceGroup extends Component { ...@@ -229,6 +230,7 @@ class DeviceGroup extends Component {
</View> </View>
</View> </View>
</AtSwipeAction> </AtSwipeAction>
</View>
))} ))}
</ListView> </ListView>
<View className="device-list-add-btn" onClick={this.AddGroup}> <View className="device-list-add-btn" onClick={this.AddGroup}>
......
src/pages/home/device/index.scss
...@@ -9,11 +9,6 @@ ...@@ -9,11 +9,6 @@
border-radius: 3px; border-radius: 3px;
} }
.hui {
height: 10px;
background: #f7f7f7;
}
.at-tabs__item--active { .at-tabs__item--active {
color: #ff9110 !important; color: #ff9110 !important;
font-size: 38px !important; font-size: 38px !important;
......
src/pages/home/film/film_list/index.tsx
...@@ -217,6 +217,7 @@ class Films extends Component { ...@@ -217,6 +217,7 @@ class Films extends Component {
</Text> </Text>
</View> </View>
</View> </View>
<View className="hui" />
<ListView <ListView
count={count} count={count}
height={height && height} height={height && height}
...@@ -233,7 +234,7 @@ class Films extends Component { ...@@ -233,7 +234,7 @@ class Films extends Component {
{ {
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#FF4949' backgroundColor: '#F32B2B'
} }
} }
]} ]}
......
src/pages/home/film/schedule_add/components/device/index.scss
...@@ -31,9 +31,24 @@ ...@@ -31,9 +31,24 @@
&-info { &-info {
flex: 1; flex: 1;
} }
&-move {
width: 125px;
height: 50px;
background: linear-gradient(270deg, rgba(255, 51, 37, 1) 0%, rgba(255, 145, 16, 1) 100%);
border-radius: 40px;
line-height: 50px;
border: none;
font-size: 28px;
color: white;
margin-right: 35px;
}
} }
&-bottom-bar { &-bottom-bar {
padding: 24px 0;
background: $bgColor;
.all { .all {
// width: 200px; // width: 200px;
display: inline-block; display: inline-block;
...@@ -42,22 +57,24 @@ ...@@ -42,22 +57,24 @@
.enter { .enter {
display: inline-block; display: inline-block;
width: 350px; width: 588px;
background: #ff9110; height: 88px;
background: rgba(255, 145, 16, 1);
border-radius: 60px;
color: white; color: white;
} }
padding: 0 20px;
display: flex; display: flex;
align-items: center; align-items: center;
// flex-direction: row; // flex-direction: row;
justify-content: space-between; justify-content: center;
} }
.search-bar-container { .search-bar-container {
padding: 20px 30px; padding: 24px 38px;
display: flex; display: flex;
align-items: center; align-items: center;
background: $bgColor;
&-left { &-left {
padding-right: 60px; padding-right: 60px;
...@@ -79,22 +96,44 @@ ...@@ -79,22 +96,44 @@
&-input { &-input {
flex: 1; flex: 1;
height: 40px; width: 675px;
padding: 20px; height: 64px;
border: 1px solid #ddd; padding: 12px 20px;
border-radius: 50px; background: rgba(238, 238, 238, 1);
border-radius: 49px;
font-size: 28px;
box-sizing: border-box;
} }
} }
.device-tab-container { .device-tab-container {
display: flex; display: flex;
font-size: 38px; font-size: 38px;
padding: 10px 0; padding: 20px 0;
.device-tab-item { .device-tab-item {
position: relative; position: relative;
width: 50%; width: 50%;
text-align: center; text-align: center;
color: #999;
font-size: 30px;
}
.device-tab-item-active {
color: #000;
position: relative;
&::after {
content: '';
position: absolute;
bottom: -13px;
width: 38px;
height: 6px;
background: rgba(255, 145, 16, 1);
box-shadow: 0 2px 4px 0 rgba(233, 145, 42, 0.43);
border-radius: 3px;
left: calc(50% - 19px);
}
} }
.device-tab-item-word { .device-tab-item-word {
......
src/pages/home/film/schedule_add/components/device/index.tsx
...@@ -297,6 +297,7 @@ class DeviceSelect extends Component { ...@@ -297,6 +297,7 @@ class DeviceSelect extends Component {
return item return item
} }
}) })
console.log(TabIndex, 'TabIndex')
return ( return (
<View className="device-bind"> <View className="device-bind">
<View className="search-bar-container"> <View className="search-bar-container">
...@@ -312,14 +313,21 @@ class DeviceSelect extends Component { ...@@ -312,14 +313,21 @@ class DeviceSelect extends Component {
/> />
</View> </View>
<View className="device-tab-container"> <View className="device-tab-container">
<View className="device-tab-item" onClick={this.showModalView}> <View
className={
TabIndex === 1 ? 'device-tab-item' : 'device-tab-item device-tab-item-active'
}
onClick={this.showModalView}
>
<Text className="device-tab-item-word"> <Text className="device-tab-item-word">
{items[activeIndex]} {items[activeIndex]}
<Text className="triangle" /> <Text className="triangle" />
</Text> </Text>
</View> </View>
<View <View
className="device-tab-item" className={
TabIndex === 0 ? 'device-tab-item' : 'device-tab-item device-tab-item-active'
}
onClick={() => { onClick={() => {
this.setState({ TabIndex: 1 }) this.setState({ TabIndex: 1 })
}} }}
...@@ -327,6 +335,7 @@ class DeviceSelect extends Component { ...@@ -327,6 +335,7 @@ class DeviceSelect extends Component {
已选设备({size}) 已选设备({size})
</View> </View>
</View> </View>
<View className="hui" />
<View className="device-bind-scroll"> <View className="device-bind-scroll">
{TabIndex === 0 ? ( {TabIndex === 0 ? (
// 0 展示全部 1 展示已选择设备 // 0 展示全部 1 展示已选择设备
...@@ -351,15 +360,16 @@ class DeviceSelect extends Component { ...@@ -351,15 +360,16 @@ class DeviceSelect extends Component {
{hasAllList.map(item => { {hasAllList.map(item => {
return ( return (
<View key={item.equipmentId}> <View key={item.equipmentId}>
<Label className="device-bind-item" onClick={() => this.changeItem(item)}> <Label className="device-bind-item">
<Checkbox
value=""
className="device-bind-item-checkbox"
checked={checked.has(item.equipmentId)}
/>
<View className="device-bind-item-info"> <View className="device-bind-item-info">
<DeviceItem {...item} /> <DeviceItem {...item} />
</View> </View>
<Button
className="device-bind-item-move"
onClick={() => this.changeItem(item)}
>
移除
</Button>
</Label> </Label>
</View> </View>
) )
...@@ -372,7 +382,7 @@ class DeviceSelect extends Component { ...@@ -372,7 +382,7 @@ class DeviceSelect extends Component {
全选 全选
</Text> </Text>
<Button className="enter" onClick={this.updateBind}> <Button className="enter" onClick={this.updateBind}>
确定 完成
</Button> </Button>
</View> </View>
<AtDrawer <AtDrawer
......
src/pages/home/tempaltes/collection.tsx
...@@ -184,7 +184,7 @@ class Collection extends Component { ...@@ -184,7 +184,7 @@ class Collection extends Component {
{ {
text: '取消收藏', text: '取消收藏',
style: { style: {
backgroundColor: '#FF4949' backgroundColor: '#F32B2B'
} }
} }
]} ]}
......
src/pages/home/tempaltes/scss/index.scss
...@@ -7,11 +7,6 @@ ...@@ -7,11 +7,6 @@
flex-direction: column; flex-direction: column;
background-color: #f7f7f7; background-color: #f7f7f7;
.hui {
height: 10px;
background: #f7f7f7;
}
&-search-bar { &-search-bar {
// height: 120px; // height: 120px;
padding: 20px 24px 10px; padding: 20px 24px 10px;
......
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