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