@import "../../../../styles/variables.scss";
.modelPage{
.small_big {
margin-top: 30px;
position: relative;
// width: 750px;
height: 250px;
width: 100%;
&:first-of-type{
margin-top: 0;
}
&.big {
height: 500px;
}
}
.small {
width: 210px;
height: 240px;
position: absolute;
transition: all 0.5s;
background-color: #fff;
.icon-name{
border-radius: 50%;
border: 2px solid $textborderColor;
color: $textborderColor;
font-size: 22px;
width: 72px;
height: 72px;
transition: all 0.5s;
text-align: center;
line-height: 72px;
}
.operationNameBar{
height: 90px;
}
.operationName{
font-size: 26px;
// margin-top: 30px;
color: $textborderColor;
// font-weight: 600;
}
.operationiconImg {
width: 72px;
height: 72px;
transition: all 0.5s;
}
.iconSize {
width: 100%;
height: 100%;
transition: all 0.5s;
}
&.small_Left {
left: 0;
top: 0;
transition: all 0.5s;
}
&.small_center {
left: 230px;
top: 0;
transition: all 0.5s;
}
&.small_right {
left: 460px;
top: 0;
transition: all 0.5s;
}
&.small_big_left {
width: 440px;
z-index: 2;
height: 500px;
left: 0;
top: 0;
transition: all 0.5s;
color: #12A5FF;
.operationiconImg {
width: 202px;
height: 202px;
transition: all 0.5s;
.iconSize{
}
}
.icon-name{
border-radius: 50%;
// border: 4px solid $activeColor;
border-color: $activeColor;
border-width: 4px;
color: $activeColor;
font-size: 40px;
width: 202px;
font-weight: 600;
height: 202px;
transition: all 0.5s;
text-align: center;
line-height: 202px;
}
.operationName{
margin-top: 20px;
font-size: 36px;
font-weight: 600;
color: $activeColor;
transition: all 0.5s;
}
.operationNameBar{
height: 180px;
.edit{
width: 106px;
height: 40px;
line-height: 40px;
font-size: 28px;
border-radius: 40px;
}
view{
padding: 5px 0;
}
}
.text2{
margin-top: 12px;
color: #686868;
font-size: 26px;
}
}
&.small_big_top {
left: 460px;
top: 0;
transition: all 0.5s;
}
&.small_big_bottom {
left: 460px;
top: 260px;
transition: all 0.5s;
}
}
}
.edit{
width: 90px;
height: 36px;
line-height: 36px;
font-size: 22px;
color: #999;
border-radius: 36px;
border: 2px solid #999;
text-align: center;
margin-top: 12px;
}
render() {
let row = [],
rowPage = [],
activeScene=this.activeScene,
imgList = modelimage
let pageContent = this.props.modelList.map((item, i) => {
let itemContent = (
<View className={'shadow small flexCenter columnFlex ' + classNameByIndex(activeScene, i)} onClick={() => this.changeSence(i, item)} key={i}>
<View className="operationiconImg">
{
imgList[item.code]||imgList[item.name]? <Image className={`iconSize ${activeScene == i ? 'brightness1' : 'brightness0'}`} src={imgList[item.code]||imgList[item.name]}></Image>:<View className="icon-name">{showName_two(item.name)}</View>
}
</View>
<View className="flexCenter columnFlex operationNameBar">
<View className="operationName">{item.name}</View>
<View className="text2" style={activeScene != i && 'display: none;' }>当前选中场景</View>
{
(item.code == '0xC1'||item.sceneCode == '999' ||item.name=='自定义模式')&& <View className="edit" onClick={(e) => this.toEdit(e)}>编辑</View>
}
</View>
</View>
)
row.push(itemContent)
if (row.length >= 3 || i == this.props.modelList.length - 1) {
rowPage.push(
<View className={' small_big ' + `${activeScene >= 0 && Math.floor(activeScene / 3) == Math.floor(i / 3) && 'big' }`}>
{row}
</View>
)
row = []
}
if (i == this.props.modelList.length - 1) {
return rowPage
}
})
return (
<View className="modelPage">
{pageContent}
</View>
)
}