临时提交
blak-kong
2 years ago
parent
3369f37266
commit
f3d8949cc8
@ -0,0 +1,79 @@
|
|||||||
|
.countdown-box {
|
||||||
|
width: 400rpx;
|
||||||
|
height: 400rpx;
|
||||||
|
padding: 0;
|
||||||
|
.countdown-title {
|
||||||
|
margin-top: 52rpx;
|
||||||
|
margin-bottom: 60rpx;
|
||||||
|
font-size: 36rpx;
|
||||||
|
font-family: PingFang SC;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #030000;
|
||||||
|
line-height: 60rpx;
|
||||||
|
}
|
||||||
|
.countdown-content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-popup-loading {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown-popup-loading-time {
|
||||||
|
position: absolute;
|
||||||
|
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 {
|
||||||
|
position: relative;
|
||||||
|
width: 160rpx;
|
||||||
|
height: 160rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #ecf0f3;
|
||||||
|
/* background-image: conic-gradient(#3CACFF 100%,#000 0%); */
|
||||||
|
}
|
||||||
|
.ui-loading__bg::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 140rpx;
|
||||||
|
height: 140rpx;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-loading {
|
||||||
|
position: absolute;
|
||||||
|
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: rotate 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
from {
|
||||||
|
transform: rotateZ(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotateZ(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,96 @@
|
|||||||
|
import classnames from "classnames";
|
||||||
|
import { Component } from "react";
|
||||||
|
|
||||||
|
import { Block, View, PageMeta } from "@tarojs/components";
|
||||||
|
|
||||||
|
import { Popup } from "@antmjs/vantui";
|
||||||
|
|
||||||
|
import "./popup.less";
|
||||||
|
import "./popup-countdown.less";
|
||||||
|
|
||||||
|
/** props
|
||||||
|
* isShow 是否显示
|
||||||
|
* isClose 右上角关闭图标
|
||||||
|
* type: 1注册
|
||||||
|
* @confirm 关闭回调
|
||||||
|
*/
|
||||||
|
export default class PopupCountdown extends Component<any, any> {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
name: "倒计时",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
async onLoad() {}
|
||||||
|
componentDidMount() {}
|
||||||
|
|
||||||
|
componentWillUnmount() {}
|
||||||
|
|
||||||
|
componentDidShow() {}
|
||||||
|
|
||||||
|
componentDidHide() {}
|
||||||
|
|
||||||
|
async initData() {}
|
||||||
|
|
||||||
|
onClose = () => {
|
||||||
|
this.props.close();
|
||||||
|
};
|
||||||
|
|
||||||
|
onConfirm = () => {
|
||||||
|
this.props.confirm();
|
||||||
|
};
|
||||||
|
|
||||||
|
onClickStop = (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let { isShow, isClose, countdown } = this.props;
|
||||||
|
return (
|
||||||
|
<Block>
|
||||||
|
<PageMeta pageStyle={isShow ? "overflow: hidden;" : ""} />
|
||||||
|
<Popup
|
||||||
|
show={isShow}
|
||||||
|
closeOnClickOverlay={false}
|
||||||
|
round
|
||||||
|
overlayStyle="width: 100vw;padding: 0;"
|
||||||
|
onClick={this.onClickStop}
|
||||||
|
>
|
||||||
|
{isClose && (
|
||||||
|
<View
|
||||||
|
className="at-icon at-icon-close common-close"
|
||||||
|
onClick={this.onClose}
|
||||||
|
></View>
|
||||||
|
)}
|
||||||
|
<View className={classnames("common-box", "countdown-box")}>
|
||||||
|
<View
|
||||||
|
className={classnames("common-popup-title", "countdown-title")}
|
||||||
|
>
|
||||||
|
启动倒计时
|
||||||
|
</View>
|
||||||
|
<View className="common-popup-content-box">
|
||||||
|
<View
|
||||||
|
className={classnames(
|
||||||
|
"common-popup-content",
|
||||||
|
"countdown-content"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<View className="countdown-popup-loading">
|
||||||
|
<View className="ui-loading__bg">
|
||||||
|
<View className="ui-loading"></View>
|
||||||
|
</View>
|
||||||
|
{countdown >= 0 && (
|
||||||
|
<View className="countdown-popup-loading-time">
|
||||||
|
{countdown}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</Block>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
.modelInfo-box {
|
||||||
|
width: 690rpx;
|
||||||
|
margin: 26rpx auto 0;
|
||||||
|
padding: 37rpx 35rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
overflow: visible;
|
||||||
|
margin-bottom: 150rpx;
|
||||||
|
.modelInfo-line {
|
||||||
|
margin-bottom: 50rpx;
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
.modelInfo-title {
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modelInfo-title {
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modelInfo-effect {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modelInfo-light-box {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.modelInfo-light-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 40rpx;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
/*margin-bottom: 20rpx;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.modelInfo-light-color {
|
||||||
|
width: 12rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
background-color: #f2c95b;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modelInfo-light-colorname {
|
||||||
|
font-size: 26rpx;
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { Block, View, ScrollView, Image } from "@tarojs/components";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isShowNurse: boolean;
|
||||||
|
ActiveModeItem: any;
|
||||||
|
}
|
||||||
|
function Index({ isShowNurse, ActiveModeItem }: Props) {
|
||||||
|
const ModeColor = {
|
||||||
|
"590nm": "#CF231D",
|
||||||
|
"630nm": "#CF231D",
|
||||||
|
"830nm": "#9C1D17",
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Block>
|
||||||
|
{isShowNurse && (
|
||||||
|
<View className="modelInfo-box">
|
||||||
|
<View className="modelInfo-line is-effect">
|
||||||
|
<View className="modelInfo-title">模式功效</View>
|
||||||
|
<View className="modelInfo-effect">{ActiveModeItem.modeDesc}</View>
|
||||||
|
</View>
|
||||||
|
<View className="modelInfo-line">
|
||||||
|
<View className="modelInfo-title">当前输出技术</View>
|
||||||
|
<View className="modelInfo-light-box">
|
||||||
|
{ActiveModeItem.combineData.map((item) => {
|
||||||
|
return (
|
||||||
|
<View className="modelInfo-light-item" key={item.id}>
|
||||||
|
<View
|
||||||
|
className="modelInfo-light-color"
|
||||||
|
style={{
|
||||||
|
backgroundColor: ModeColor[item.technologyInfo],
|
||||||
|
}}
|
||||||
|
></View>
|
||||||
|
<View className="modelInfo-light-colorname">
|
||||||
|
{item.effectContent}({item.technologyInfo})
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</Block>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Index;
|
||||||
Loading…
Reference in New Issue