临时提交
blak-kong
2 years ago
parent
5c85dc7e5d
commit
5c28cc0624
@ -0,0 +1,99 @@
|
||||
.mode-list-box {
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
margin-bottom: 20rpx;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.mode-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.mode-item-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 110rpx;
|
||||
min-width: 110rpx;
|
||||
font-size: 26rpx;
|
||||
font-family: PingFang SC;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin: 0 20rpx;
|
||||
}
|
||||
.mode-item {
|
||||
display: flex;
|
||||
min-width: 140rpx;
|
||||
height: 160rpx;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
/*padding: 17rpx 18rpx;*/
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
.mode-info {
|
||||
min-width: 140rpx;
|
||||
padding-left: 10rpx;
|
||||
padding-right: 10rpx;
|
||||
.mode-info-title {
|
||||
margin-bottom: 4rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.mode-info-time {
|
||||
margin-bottom: 4rpx;
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.mode-info-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin: 10rpx auto 0;
|
||||
border: 3rpx solid #f1f1f1;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
&.is-select {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mode-info-select-point {
|
||||
width: 14rpx;
|
||||
height: 14rpx;
|
||||
background-color: #000000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mode-item + .mode-item {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
.mode-item-active {
|
||||
min-width: 300rpx;
|
||||
padding-right: 11rpx;
|
||||
background: linear-gradient(90deg, #efdcc2 0%, #fff2df 100%);
|
||||
}
|
||||
|
||||
.mode-pic {
|
||||
width: 140rpx;
|
||||
height: 140rpx;
|
||||
/*margin-left: 20rpx;*/
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mode-pic image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,104 @@
|
||||
import Taro from "@tarojs/taro";
|
||||
import { Block, View, ScrollView, Image } from "@tarojs/components";
|
||||
import "./index.less";
|
||||
|
||||
interface Props {
|
||||
// link: string;
|
||||
// children?: any;
|
||||
ModeList: any;
|
||||
}
|
||||
|
||||
let scrollIntoView = "0";
|
||||
|
||||
function Index({ ModeList }: any) {
|
||||
let VisorList = ModeList.filter((item) => item.modeType === 1); // 面罩模式
|
||||
let CabinList = ModeList.filter((item) => item.modeType === 2); // 舱体模式
|
||||
let YimeishList = ModeList.filter((item) => item.modeType === 3); // 医美术后
|
||||
return (
|
||||
<Block>
|
||||
<ScrollView
|
||||
className="mode-list-box"
|
||||
scroll-x="true"
|
||||
scrollIntoView={scrollIntoView}
|
||||
>
|
||||
{VisorList.length > 0 && (
|
||||
<View className="mode-list">
|
||||
<View className="mode-item-title">面罩模式</View>
|
||||
{VisorList.map((item: any, index: any) => {
|
||||
return (
|
||||
<View key={index} className="mode-item mode-item-active">
|
||||
<View className="mode-info">
|
||||
<View className="mode-info-title">{item.modeName}</View>
|
||||
<View className="mode-info-time">{item.modeDesc}</View>
|
||||
<View className="mode-info-select is-select">
|
||||
<View className="mode-info-select-point"></View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="mode-pic">
|
||||
<Image src={item.banner} mode="aspectFill" />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
<ScrollView
|
||||
className="mode-list-box"
|
||||
scrollX={true}
|
||||
scrollIntoView={scrollIntoView}
|
||||
>
|
||||
{CabinList.length > 0 && (
|
||||
<View className="mode-list">
|
||||
<View className="mode-item-title">舱体模式</View>
|
||||
{CabinList.map((item: any, index: any) => {
|
||||
return (
|
||||
<View key={index} className="mode-item mode-item-active">
|
||||
<View className="mode-info">
|
||||
<View className="mode-info-title">{item.title}</View>
|
||||
<View className="mode-info-time">{item.time}</View>
|
||||
<View className="mode-info-select is-select">
|
||||
<View className="mode-info-select-point"></View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="mode-pic">
|
||||
<Image src={item.banner} mode="aspectFill" />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
<ScrollView
|
||||
className="mode-list-box"
|
||||
scrollX={true}
|
||||
scrollIntoView={scrollIntoView}
|
||||
>
|
||||
{YimeishList.length > 0 && (
|
||||
<View className="mode-list">
|
||||
<View className="mode-item-title">医美术后</View>
|
||||
{YimeishList.map((item: any, index: any) => {
|
||||
return (
|
||||
<View key={index} className="mode-item mode-item-active">
|
||||
<View className="mode-info">
|
||||
<View className="mode-info-title">{item.title}</View>
|
||||
<View className="mode-info-time">{item.time}</View>
|
||||
<View className="mode-info-select is-select">
|
||||
<View className="mode-info-select-point"></View>
|
||||
</View>
|
||||
</View>
|
||||
<View className="mode-pic">
|
||||
<Image src={item.banner} mode="aspectFill" />
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
)}
|
||||
</ScrollView>
|
||||
</Block>
|
||||
);
|
||||
}
|
||||
|
||||
export default Index;
|
||||
@ -0,0 +1,52 @@
|
||||
.iot-main {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #f8f8f8;
|
||||
box-sizing: border-box;
|
||||
.banner-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 690rpx;
|
||||
height: 790rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 30rpx;
|
||||
.music-btn {
|
||||
position: absolute;
|
||||
top: 17rpx;
|
||||
right: 17rpx;
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 50%;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.music-btn_icon {
|
||||
width: 54rpx;
|
||||
height: 54rpx;
|
||||
}
|
||||
}
|
||||
.video-or-image {
|
||||
display: block;
|
||||
width: 690rpx;
|
||||
height: 690rpx;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
.iot-device {
|
||||
width: 690rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 50rpx;
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue