314637581
/
flossom-miniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix:样式冲突处理

Browse Source
master
blak-kong 2 years ago
parent c76c055467
commit 32d03bd9ee
5 changed files with 166 additions and 177 deletions
Show Stats Download Patch File Download Diff File

110
src/components/popup/popup-countdown.less
Unescape Escape View File

@ -15,65 +15,65 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
}
.countdown-popup-loading {
position: relative;
}
.countdown-popup-loading-time { .countdown-popup-loading {
position: absolute; position: relative;
top: 0; }
bottom: 0;
left: 0;
right: 0;
width: 50rpx;
height: 50rpx;
line-height: 50rpx;
margin: auto;
font-size: 54rpx;
text-align: center;
color: #ecf0f3;
font-weight: bold;
}
.ui-loading__bg { .countdown-popup-loading-time {
position: relative; position: absolute;
width: 160rpx; top: 0;
height: 160rpx; bottom: 0;
border-radius: 50%; left: 0;
background-color: #ecf0f3; right: 0;
/* background-image: conic-gradient(#3CACFF 100%,#000 0%); */ width: 50rpx;
} height: 50rpx;
.ui-loading__bg::before { line-height: 50rpx;
content: ""; margin: auto;
position: absolute; font-size: 54rpx;
left: 50%; text-align: center;
top: 50%; color: #ecf0f3;
transform: translate(-50%, -50%); font-weight: bold;
width: 140rpx; }
height: 140rpx;
border-radius: 50%;
background-color: #fff;
}
.ui-loading { .ui-loading__bg {
position: absolute; position: relative;
width: 160rpx; width: 160rpx;
height: 160rpx; height: 160rpx;
border-radius: 50%; border-radius: 50%;
background: transparent; background-color: #ecf0f3;
box-sizing: border-box; /* background-image: conic-gradient(#3CACFF 100%,#000 0%); */
border: 10rpx solid #3cacff; }
clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%); .ui-loading__bg::before {
animation: rotate 1s linear infinite; content: "";
} position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 140rpx;
height: 140rpx;
border-radius: 50%;
background-color: #fff;
}
@keyframes rotate { .ui-loading {
from { position: absolute;
transform: rotateZ(0deg); width: 160rpx;
height: 160rpx;
border-radius: 50%;
background: transparent;
box-sizing: border-box;
border: 10rpx solid #3cacff;
clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%);
animation: countdownRotate 1s linear infinite;
} }
to {
transform: rotateZ(360deg); @keyframes countdownRotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
} }
} }

10
src/moduleIOT/pages/iotCarePlan/WL200.tsx
Unescape Escape View File

@ -272,7 +272,12 @@ class IotCarePlanWL200 extends Component<any, any> {
title: obj.name, title: obj.name,
}); });
Taro.showLoading({
title: "请求中...",
mask: true,
});
await this.GetModeList(obj.id); await this.GetModeList(obj.id);
Taro.hideLoading();
// 如果不存在设备模式值，则判断为首次进入，弹窗提示 // 如果不存在设备模式值，则判断为首次进入，弹窗提示
let isFirstTipShow = getStorageSync("first_instrument_" + obj.id); let isFirstTipShow = getStorageSync("first_instrument_" + obj.id);
@ -1928,7 +1933,10 @@ class IotCarePlanWL200 extends Component<any, any> {
goFaceReport = () => { goFaceReport = () => {
// 跳转前置空定时器，防止重复提交 // 跳转前置空定时器，防止重复提交
if (currentTimeTimer) clearInterval(currentTimeTimer); if (currentTimeTimer) clearInterval(currentTimeTimer);
go("/recording/pages/face_report/face_report?id=" + this.state.currentDevice.id); go(
"/recording/pages/face_report/face_report?id=" +
this.state.currentDevice.id
);
}; };
// 完成配对 // 完成配对

150
src/moduleIOT/pages/iotCarePlan/components/Echart/index.less
Unescape Escape View File

@ -1,4 +1,4 @@
.box { .echart-component {
width: 690rpx; width: 690rpx;
height: 320rpx; height: 320rpx;
margin: 28rpx auto 150rpx; margin: 28rpx auto 150rpx;
@ -8,94 +8,84 @@
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
.fullscreen {
// writing-mode: vertical-lr; position: fixed;
// text-orientation: upright; top: 450rpx;
// white-space: nowrap; left: -450rpx;
// font-size: 18px; right: 0;
// font-weight: bold; bottom: 0;
// background-color: #c2e5f3;
// color: #fff;
// width: 100%;
}
.fullscreen {
position: fixed;
top: 450rpx;
left: -450rpx;
right: 0;
bottom: 0;
width: 100vh;
height: 100vw;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
transform: rotate(90deg);
// animation: rotate 0s linear;
}
@keyframes rotate {
from {
width: 690rpx;
height: 320rpx;
transform: rotate(0deg);
}
to {
width: 100vh; width: 100vh;
height: 100vw; height: 100vw;
transform: rotate(0deg); z-index: 9999;
background-color: rgba(0, 0, 0, 0.5); /* 背景色 */
transform: rotate(90deg);
// animation: rotate 0s linear;
} }
}
.box_background { @keyframes echartRotate {
position: absolute; from {
top: 0; width: 690rpx;
left: 0; height: 320rpx;
width: 690rpx; transform: rotate(0deg);
height: 320rpx; }
border-radius: 30rpx; to {
background-color: #fff; width: 100vh;
.power { height: 100vw;
margin: 34rpx 0 28rpx 28rpx; transform: rotate(0deg);
font-family: PingFang-SC; }
font-weight: 500;
font-size: 18rpx;
color: #cccccc;
} }
.full {
width: 24rpx; .box_background {
height: 24rpx;
position: absolute; position: absolute;
top: 32rpx; top: 0;
right: 26rpx; left: 0;
z-index: 2; width: 690rpx;
} height: 320rpx;
.line { border-radius: 30rpx;
margin: 0 0 6rpx 35rpx; background-color: #fff;
font-family: PingFang-SC; .power {
font-size: 14rpx; margin: 34rpx 0 28rpx 28rpx;
color: #cccccc; font-family: PingFang-SC;
display: flex; font-weight: 500;
position: relative; font-size: 18rpx;
height: 18rpx; color: #cccccc;
.bottom_line { }
// border-bottom: 1rpx #ccc dashed; .full {
width: 550rpx; width: 24rpx;
margin-left: 20rpx; height: 24rpx;
position: absolute; position: absolute;
bottom: -6rpx; top: 32rpx;
right: 74rpx; right: 26rpx;
height: 4rpx; z-index: 2;
color: #fff; }
.line {
margin: 0 0 6rpx 35rpx;
font-family: PingFang-SC;
font-size: 14rpx;
color: #cccccc;
display: flex;
position: relative;
height: 18rpx;
.bottom_line {
// border-bottom: 1rpx #ccc dashed;
width: 550rpx;
margin-left: 20rpx;
position: absolute;
bottom: -6rpx;
right: 74rpx;
height: 4rpx;
color: #fff;
}
} }
}
.time { .time {
position: absolute; position: absolute;
bottom: 22rpx; bottom: 22rpx;
right: 24rpx; right: 24rpx;
font-family: PingFang-SC; font-family: PingFang-SC;
font-size: 18rpx; font-size: 18rpx;
color: #cccccc; color: #cccccc;
}
} }
} }

64
src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx
Unescape Escape View File

@ -9,13 +9,11 @@ import echarts from "@/utils/echarts.min.js";
import "./index.less"; import "./index.less";
interface Props { interface Props {
series: any, series: any;
full:any full: any;
} }
function Index({ series, full }: Props) {
function Index({ series ,full}: Props) {
const echartsRef = useRef<EchartsHandle>(null); const echartsRef = useRef<EchartsHandle>(null);
const [options, setOptions] = useState({ const [options, setOptions] = useState({
animation: false, animation: false,
@ -145,40 +143,36 @@ function Index({ series ,full}: Props) {
color: "#ff8410", color: "#ff8410",
}, },
}, },
series: [] series: [],
}) });
const level = [8, 7, 6, 5, 4, 3, 2]; const level = [8, 7, 6, 5, 4, 3, 2];
const [newOptions, setNewOptions] = useState(options) const [newOptions, setNewOptions] = useState(options);
const updata = useCallback((res) => { const updata = useCallback((res) => {
let option = JSON.parse(JSON.stringify(options)) let option = JSON.parse(JSON.stringify(options));
option.series = JSON.parse(JSON.stringify(res)) option.series = JSON.parse(JSON.stringify(res));
// 更新图表数据 // 更新图表数据
setNewOptions(option) setNewOptions(option);
}, []) }, []);
const cancelFull = useCallback((res) => { const cancelFull = useCallback((res) => {
full() full();
}, []) }, []);
useEffect(() => { useEffect(() => {
setOptions(newOptions) setOptions(newOptions);
}, [newOptions]); }, [newOptions]);
useEffect(() => { useEffect(() => {
updata(series) updata(series);
}, [series]) }, [series]);
return ( return (
<Block> <Block>
<View id='box' className='box'> <View id="box" className="echart-component">
<Echarts <Echarts
force-use-old-canvas='false' force-use-old-canvas="false"
echarts={echarts} echarts={echarts}
option={options} option={options}
ref={echartsRef} ref={echartsRef}
@ -186,22 +180,26 @@ function Index({ series ,full}: Props) {
// style自定义设置echarts宽高 // style自定义设置echarts宽高
style={{ width: "630rpx", height: "260rpx", zIndex: 1 }} style={{ width: "630rpx", height: "260rpx", zIndex: 1 }}
/> />
<View className='box_background'> <View className="box_background">
<Image className='full' src={require("@/img/full-scran.png")} onClick={cancelFull}></Image> <Image
<View className='power'>实时能量</View> className="full"
src={require("@/img/full-scran.png")}
onClick={cancelFull}
></Image>
<View className="power">实时能量</View>
{level.map((item) => ( {level.map((item) => (
<View className='line' key={item}> <View className="line" key={item}>
<View className='number'>{item}</View> <View className="number">{item}</View>
<View className='bottom_line'></View> <View className="bottom_line"></View>
</View> </View>
))} ))}
<View className='line'> <View className="line">
<View className='number'>1</View> <View className="number">1</View>
</View> </View>
<View className='time'>时间</View> <View className="time">时间</View>
</View> </View>
</View> </View>
</Block > </Block>
); );
} }

9
src/pages/index/index.tsx
Unescape Escape View File

@ -1132,7 +1132,7 @@ class Index extends Component<any, any> {
return ( return (
<Block> <Block>
{/* <PageMeta pageOrientation="landscape"> */} {/* <PageMeta pageOrientation="landscape"></PageMeta> */}
<View catchMove> <View catchMove>
<PopupAlert <PopupAlert
isShow={isCommonError} isShow={isCommonError}
@ -1457,13 +1457,6 @@ class Index extends Component<any, any> {
<Popup show={show} className="custom-popup" overlay={false}> <Popup show={show} className="custom-popup" overlay={false}>
<View className="popBox">你已绑定所有设备</View> <View className="popBox">你已绑定所有设备</View>
</Popup> </Popup>
{/* </PageMeta>
<View
style="position:fixed;width:100vw;height:100vh"
onClick={this.goTest}
>
横屏了
</View> */}
</Block> </Block>
); );
} }

Write Preview
Loading…
Cancel
Save