flossom-miniapp/src/pages/iotCarePlan/components/ModeContent/index.tsx

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;