From 9a0e253ba02b1eacee4c86bd61f68abc507b91e4 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Thu, 21 Mar 2024 09:25:24 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/moduleIOT/pages/iotCarePlan/FR200.less | 4 + src/moduleIOT/pages/iotCarePlan/FR200.tsx | 218 ++++++++++-------- .../iotCarePlan/components/Echart/index.tsx | 51 +++- .../moisture_test_report.tsx | 2 +- 4 files changed, 165 insertions(+), 110 deletions(-) diff --git a/src/moduleIOT/pages/iotCarePlan/FR200.less b/src/moduleIOT/pages/iotCarePlan/FR200.less index 231581f..ea47e89 100644 --- a/src/moduleIOT/pages/iotCarePlan/FR200.less +++ b/src/moduleIOT/pages/iotCarePlan/FR200.less @@ -1 +1,5 @@ @import url(./WL200.less); + +.show { + display: none; +} diff --git a/src/moduleIOT/pages/iotCarePlan/FR200.tsx b/src/moduleIOT/pages/iotCarePlan/FR200.tsx index aa1d832..6c92f26 100644 --- a/src/moduleIOT/pages/iotCarePlan/FR200.tsx +++ b/src/moduleIOT/pages/iotCarePlan/FR200.tsx @@ -3,16 +3,15 @@ import dayjs from "dayjs"; import classnames from "classnames"; import { debounce } from "lodash"; -// eslint-disable-next-line import/no-named-as-default import React, { Component, PropsWithChildren, useEffect, useState, } from "react"; - -import Echarts from "./components/Echart/index"; -import Gears from "./components/Gears/index"; +/*** redux ***/ +import { connect } from "react-redux"; +/*** redux end ***/ import { Block, View, @@ -23,9 +22,27 @@ import { Button, } from "@tarojs/components"; -/*** redux ***/ -import { connect } from "react-redux"; -/*** redux end ***/ +import { + notifyBLECharacteristicValueChange, + sendCommand, +} from "@/utils/bluetoothWXAPI"; +import { + deviceCommandSamples, + bleCommandSamples, +} from "@/components/bluetoot/connection/wl200"; + +import { minSecToS, s_to_ms, s_to_hms, sleep, s_to_s } from "@/utils/util"; +// import { DeviceToolKit as DeviceToolKitWE100 } from "@flossom-npm/iot-translater-we100"; +import { + DeviceToolKit as DeviceToolKitWM, + TResponseFromDevice as TResponseFromDeviceWM, +} from "@flossom-npm/iot-translater"; +import commandMap from "@/utils/commandMap"; +import { Popup } from "@antmjs/vantui"; +import { fr200BleCommand } from "@/components/bluetoot/connection/fr200"; + +import { go, getStorageSync, setStorageSync, msg } from "@/utils/traoAPI"; +import { InstrumentInfo } from "@/utils/Interface"; /* 公共组件 */ import Navbar from "@/components/navbar/navbar"; @@ -45,28 +62,13 @@ import Footer from "./components/Footer/FR200"; import WaterTest from "./components/WaterTest/index"; /* 本页组件 END */ -import { go, getStorageSync, setStorageSync, msg } from "@/utils/traoAPI"; -import { InstrumentInfo } from "@/utils/Interface"; +import Echarts from "./components/Echart"; +import Gears from "./components/Gears"; + + import "./FR200.less"; -import { - notifyBLECharacteristicValueChange, - sendCommand, -} from "@/utils/bluetoothWXAPI"; -import { - deviceCommandSamples, - bleCommandSamples, -} from "@/components/bluetoot/connection/wl200"; -import { minSecToS, s_to_ms, s_to_hms, sleep, s_to_s } from "@/utils/util"; -// import { DeviceToolKit as DeviceToolKitWE100 } from "@flossom-npm/iot-translater-we100"; -import { - DeviceToolKit as DeviceToolKitWM, - TResponseFromDevice as TResponseFromDeviceWM, -} from "@flossom-npm/iot-translater"; -import commandMap from "@/utils/commandMap"; -import { Popup } from "@antmjs/vantui"; -import { fr200BleCommand } from "@/components/bluetoot/connection/fr200"; const deviceToolKitInstanceFR200 = new DeviceToolKitWM("FR200"); let deviceToolKitInstance = deviceToolKitInstanceFR200; @@ -190,6 +192,7 @@ class IotCarePlanFR200 extends Component { // isFirstEntryMode: false, // 模式首次打开 isShowHistoryMsg: false, // 是否显示正在同步历史 + showEcharts: false }; } @@ -231,10 +234,10 @@ class IotCarePlanFR200 extends Component { BaseModeType: string[] = ["face", "eyes"]; async onLoad(option) { - console.log(option,'跳转过来的数据'); + console.log(option, '跳转过来的数据'); if (option.modeId) { this.setState({ activeModeID: option.modeId }) - + } // 保持屏幕常亮 Taro.setKeepScreenOn({ @@ -243,11 +246,11 @@ class IotCarePlanFR200 extends Component { this.initData(); this.getInstrumentClockSummary(); this.getInstrumentClockDetail(); - + } - componentDidMount() {} + componentDidMount() { } - componentWillUnmount() {} + componentWillUnmount() { } componentDidShow() { console.log("页面显示了"); @@ -376,7 +379,7 @@ class IotCarePlanFR200 extends Component { instrumentId: id, }; let res = await InstrumentInfo.modeInfoList(params); - + if (res.data.code === 200) { if (res.data.data.length > 0) { this.setState({ @@ -392,7 +395,7 @@ class IotCarePlanFR200 extends Component { } }) } - let res1= res.data.data.find(e =>e.id == this.state.activeModeID) + let res1 = res.data.data.find(e => e.id == this.state.activeModeID) setTimeout(() => { this.modeCurrentFun(res1); }, 100); @@ -436,7 +439,7 @@ class IotCarePlanFR200 extends Component { * @name 选中/切换护理模式 * */ modeCurrentFun = async (data, isNotCheck = false) => { - let { isShowNurse,activeModeID } = this.state; + let { isShowNurse, activeModeID } = this.state; // 护理检查改变模式，是否提示切换护理模式 // isNotCheck为真时，不进行校验，直接切换 this.tempModeCurrent = data; @@ -491,8 +494,8 @@ class IotCarePlanFR200 extends Component { if (data.serviceData.length > 0) { this.setServiceTimeData(); } - - + + }); // 开发中，暂时允许直接切换 @@ -630,9 +633,15 @@ class IotCarePlanFR200 extends Component { this.showTips("检测到您的设备没有紧贴肌肤，请紧贴肌肤后重新尝试"); }); }; + look() { + this.setState({ showEcharts: !this.state.showEcharts }); + } + updata() { + + } // 绘制能量图 - drawProwerPicture() {} + drawProwerPicture() { } /** 切换光照 */ onSwitchChange = async () => { @@ -1945,11 +1954,11 @@ class IotCarePlanFR200 extends Component { let report = true; go( "/recoding/pages/face_report_one/face_report_one?id=" + - id + - "&report=" + - report + - "&obj=" + - JSON.stringify(obj) + id + + "&report=" + + report + + "&obj=" + + JSON.stringify(obj) ); } else if ("moistureTest" === nursingData.workMode) { console.log("水分测试"); @@ -2083,6 +2092,7 @@ class IotCarePlanFR200 extends Component { isShowHistoryMsg, isModeLock, TestModeStepIndex, + showEcharts } = this.state; return ( @@ -2098,19 +2108,19 @@ class IotCarePlanFR200 extends Component { { isLarge isClose isShow={isEndCarePlan} - title="提示" - content="是否结束护理" - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + title='提示' + content='是否结束护理' + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelEndBtn} confirm={this.confirmEndBtn} /> @@ -2134,7 +2144,7 @@ class IotCarePlanFR200 extends Component { isLarge isClose isShow={isSwitchActiveMode} - title="护理模式切换" + title='护理模式切换' content={ { onModeLockOpen={this.onModeLockOpen} /> } - textAlgin="center" - cancelButtonText="取消" - confirmButtonText="确定" + textAlgin='center' + cancelButtonText='取消' + confirmButtonText='确定' close={this.cancelModeSwitchBtn} confirm={this.confirmModeSwitchBtn} /> @@ -2160,7 +2170,7 @@ class IotCarePlanFR200 extends Component { isShow={isShowStepTips} isLarge isFirstEntry={false} - confirmButtonText="知道了" + confirmButtonText='知道了' data={ActiveModeItem.openSourceData} close={this.closeStepTips} /> @@ -2169,10 +2179,10 @@ class IotCarePlanFR200 extends Component { @@ -2181,11 +2191,11 @@ class IotCarePlanFR200 extends Component { isShow={isShowErrorTipsText} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={errorTipsText} - confirmButtonText="知道了" - textAlgin="center" + confirmButtonText='知道了' + textAlgin='center' close={this.closeErrorTipsText} confirm={this.closeErrorTipsText} /> @@ -2194,17 +2204,17 @@ class IotCarePlanFR200 extends Component { isShow={isShowTipsSave} isClose zIndex={10020} - myClassName="level-up" - title="提示" + myClassName='level-up' + title='提示' content={ 当前模式已护理部分时间 是否保存护理记录 } - cancelButtonText="取消" - confirmButtonText="确认" - textAlgin="center" + cancelButtonText='取消' + confirmButtonText='确认' + textAlgin='center' close={this.closeTipsSave} cancel={this.cancelTipsSave} confirm={this.confirmTipsSave} @@ -2213,11 +2223,11 @@ class IotCarePlanFR200 extends Component { { /*不需要做处理*/ }} @@ -2228,28 +2238,28 @@ class IotCarePlanFR200 extends Component { deviceInfo={currentDevice} close={this.connectionClose} isDisconnect={!isConnectionBlutoot} - offlineChange={() => {}} + offlineChange={() => { }} pairingChange={this.pairingChange} - upgradeFun={() => {}} + upgradeFun={() => { }} /> )} - 正在同步护理记录... + 正在同步护理记录... - - + + {!isShowNurse && ( - - - + + + 护理时间： - {currentTime} + {currentTime} - + { onModeLockOpen={this.onModeLockOpen} /> )} + + + - {(ActiveModeItem.modeType === "face" || - ActiveModeItem.modeType === "eyes") && } + + {/* {(ActiveModeItem.modeType === "face" || + ActiveModeItem.modeType === "eyes") && } */} {(ActiveModeItem.modeType === "maskPenetration" || ActiveModeItem.modeType === "essence") && ( - - )} + + )} {ActiveModeItem.modeType === "moistureTest" && ( (null); - const option: EChartOption = { - + const [options, setOptions] = useState({ + animation:false, grid: { // 让图表占满容器 top: "28rpx", @@ -258,14 +258,51 @@ function Index() { }, }, ], - }; + }) const level = [8, 7, 6, 5, 4, 3, 2]; + const [newOptions, setNewOptions] = useState(options) const full = () => { - let box = document.getElementById("box"); - box?.classList.add('fullscreen') + // let box = document.getElementById("box"); + // box?.classList.add('fullscreen') + + + let stop = 0 + let time = setInterval(function () { + stop++ + let option = JSON.parse(JSON.stringify(options)) + let num = Math.floor(Math.random() * 9) + let count = 0 + options.series.map(item => { + if (item.type === 'line') { + item.data.splice(0, 1) + item.data.push(num) + } + if (item.type === 'bar') { + count++ + item.data.splice(0, 1) + if (count <= num) { + item.data.push(1) + } else { + item.data.push(0) + } + } + }) + console.log(option); + + // 更新图表数据 + setNewOptions(option) + if (stop > 10) { + clearInterval(time) + } + }, 1000) + } + + useEffect(() => { + setOptions(newOptions) + }, [newOptions]); // 当 someProp 变化时执行 // const quanping = () => { // T.setPageOrientation({ // orientation: "portrait", @@ -284,7 +321,7 @@ function Index() { { constructor(props) { From 57c2834de2169fd91b23f665d93eab439ad7ac85 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 22 Mar 2024 09:24:16 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/moduleIOT/pages/iotCarePlan/FR200.tsx | 30 ++++- .../iotCarePlan/components/Echart/index.tsx | 104 +++++++++++------- .../moisture_test_report.tsx | 16 ++- src/recoding/pages/recording/recording.tsx | 28 ++--- src/utils/Interface.js | 9 ++ 5 files changed, 128 insertions(+), 59 deletions(-) diff --git a/src/moduleIOT/pages/iotCarePlan/FR200.tsx b/src/moduleIOT/pages/iotCarePlan/FR200.tsx index 6c92f26..91d3685 100644 --- a/src/moduleIOT/pages/iotCarePlan/FR200.tsx +++ b/src/moduleIOT/pages/iotCarePlan/FR200.tsx @@ -192,7 +192,9 @@ class IotCarePlanFR200 extends Component { // isFirstEntryMode: false, // 模式首次打开 isShowHistoryMsg: false, // 是否显示正在同步历史 - showEcharts: false + showEcharts: false, + echartsData: '' //传给echarts图表的数据 + }; } @@ -634,10 +636,22 @@ class IotCarePlanFR200 extends Component { }); }; look() { - this.setState({ showEcharts: !this.state.showEcharts }); + let that = this + // this.setState({ showEcharts: !this.state.showEcharts }); + let stop = 0 + let time = setInterval(function () { + stop++ + let random = Math.random(); + that.setState({ echartsData: random }) + if (stop >= 20) { + clearInterval(time) + } + }, 1000) + + } updata() { - + } // 绘制能量图 @@ -1565,6 +1579,7 @@ class IotCarePlanFR200 extends Component { console.log("保存setFR200NursingHistory"); }; /** 更新WL200护理历史运行时间 */ + updateFR200NursingHistory = (data: any = null, jsonStatus = null) => { this.FR200NursingHistory = Taro.getStorageSync("FR200NursingHistory"); @@ -1593,6 +1608,8 @@ class IotCarePlanFR200 extends Component { if (!params.dataArray) params.dataArray = []; params.dataArray.push(jsonStatus); params.jsonStatus = jsonStatus; + + } } Taro.setStorageSync("FR200NursingHistory", params); @@ -1601,7 +1618,7 @@ class IotCarePlanFR200 extends Component { // 基础模式可在这里调用函数更新图标Echarts // 最新一条数据jsonStatus // 注意事项：只拿working状态 - // todo + // todo } else { this.setFR200NursingHistory(jsonStatus); } @@ -2092,7 +2109,8 @@ class IotCarePlanFR200 extends Component { isShowHistoryMsg, isModeLock, TestModeStepIndex, - showEcharts + showEcharts, + echartsData } = this.state; return ( @@ -2326,7 +2344,7 @@ class IotCarePlanFR200 extends Component { - + {/* {(ActiveModeItem.modeType === "face" || ActiveModeItem.modeType === "eyes") && } */} diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx index 7626570..403ab82 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.tsx @@ -2,25 +2,23 @@ import Taro from "@tarojs/taro"; import classnames from "classnames"; import { Block, View, Image, Text, Input } from "@tarojs/components"; import { Popup, Progress, Slider } from "@antmjs/vantui"; -import { useEffect, useRef, useState } from "react"; +import { useEffect, useRef, useState, useCallback } from "react"; import Echarts, { EChartOption, EchartsHandle } from "taro-react-echarts"; import echarts from "@/utils/echarts.min.js"; import "./index.less"; interface Props { - Electricity: any; - matrixElectricity: any; - facialMaskConnectStatus: any; + data: any } -function Index() { - +function Index({ data }: Props) { + const buttonRef = useRef(null); const echartsRef = useRef(null); const [options, setOptions] = useState({ - animation:false, + animation: false, grid: { // 让图表占满容器 top: "28rpx", @@ -262,47 +260,78 @@ function Index() { const level = [8, 7, 6, 5, 4, 3, 2]; const [newOptions, setNewOptions] = useState(options) - const full = () => { + const [newData, setNewData] = useState(0) + const full = useCallback(() => { // let box = document.getElementById("box"); // box?.classList.add('fullscreen') let stop = 0 - let time = setInterval(function () { - stop++ - let option = JSON.parse(JSON.stringify(options)) - let num = Math.floor(Math.random() * 9) - let count = 0 - options.series.map(item => { - if (item.type === 'line') { - item.data.splice(0, 1) - item.data.push(num) - } - if (item.type === 'bar') { - count++ - item.data.splice(0, 1) - if (count <= num) { - item.data.push(1) - } else { - item.data.push(0) - } + // let time = setInterval(function () { + // stop++ + let option = JSON.parse(JSON.stringify(options)) + let num = Math.floor(Math.random() * 9) + let count = 0 + options.series.map(item => { + if (item.type === 'line') { + item.data.splice(0, 1) + item.data.push(num) + } + if (item.type === 'bar') { + count++ + item.data.splice(0, 1) + if (count <= num) { + item.data.push(1) + } else { + item.data.push(0) } - }) - console.log(option); - - // 更新图表数据 - setNewOptions(option) - if (stop > 10) { - clearInterval(time) } - }, 1000) + }) + console.log(option); - } + // 更新图表数据 + setNewOptions(option) + // if (stop > 20) { + // clearInterval(time) + // } + // }, 1000) + + }, [data]) useEffect(() => { setOptions(newOptions) - }, [newOptions]); // 当 someProp 变化时执行 + }, [newOptions]); + + useEffect(() => { + setNewData(data) + }, [data]); + + useEffect(() => { + let option = JSON.parse(JSON.stringify(options)) + let num = Math.floor(newData * 9) + let count = 0 + options.series.map(item => { + if (item.type === 'line') { + item.data.splice(0, 1) + item.data.push(num) + } + if (item.type === 'bar') { + count++ + item.data.splice(0, 1) + if (count <= num) { + item.data.push(1) + } else { + item.data.push(0) + } + } + }) + console.log(option, data); + + // 更新图表数据 + setNewOptions(option) + }, [newData]) + // 当 someProp 变化时执行 // const quanping = () => { // T.setPageOrientation({ // orientation: "portrait", @@ -315,6 +344,7 @@ function Index() { // }, + return ( @@ -328,7 +358,7 @@ function Index() { style={{ width: "630rpx", height: "260rpx", zIndex: 1 }} /> - + 实时能量 {level.map((item) => ( diff --git a/src/recoding/pages/moisture_test_report/moisture_test_report.tsx b/src/recoding/pages/moisture_test_report/moisture_test_report.tsx index 07709ba..9b95f9a 100644 --- a/src/recoding/pages/moisture_test_report/moisture_test_report.tsx +++ b/src/recoding/pages/moisture_test_report/moisture_test_report.tsx @@ -1,6 +1,7 @@ import { Block, View, Text, Image, Input, Button } from "@tarojs/components"; import { Component, PropsWithChildren, useEffect, useState } from "react"; import { go } from "@/utils/traoAPI"; +import { InstrumentInfo } from "@/utils/Interface"; import "taro-ui/dist/style/components/button.scss"; // 按需引入 import Taro from "@tarojs/taro"; @@ -34,6 +35,7 @@ class MoistureTestReport extends Component { rightFace: 0 } }, + instrumentId: 0, isClock: false, xinde: '', imglist: [], @@ -72,9 +74,19 @@ class MoistureTestReport extends Component { reportData.shuifenGear.rightFace = gear } }) - this.setState({ reportData, modeId: option.modeId }); + this.setState({ reportData, modeId: option.modeId, instrumentId: option.id }); + this.moistureTest() } async initData() { } + async moistureTest() { + let data = { + queryDate: this.state.reportData.curDate, + instrumentId: this.state.instrumentId + } + let res = await InstrumentInfo.fr200.moistureTest(data); + + } + toIndex() { Taro.reLaunch({ url: "/pages/index/index" }); } @@ -83,7 +95,7 @@ class MoistureTestReport extends Component { } render() { - let { name, imgUrl, reportData, reportData1, isClock, xinde, imglist, id, show, modeId } = this.state + let { name, imgUrl, reportData, reportData1, isClock, xinde, imglist, id, show, modeId, instrumentId } = this.state const getStatusData = (level) => { var bgCssData = { diff --git a/src/recoding/pages/recording/recording.tsx b/src/recoding/pages/recording/recording.tsx index 2a3587d..e89a1bb 100644 --- a/src/recoding/pages/recording/recording.tsx +++ b/src/recoding/pages/recording/recording.tsx @@ -299,8 +299,8 @@ export default class Recording extends Component { setStorageSync("instrument_detail", instrument); } }) - - if ([1,2,3,4,5].includes(item.jumpType)) { + + if ([1, 2, 3, 4, 5].includes(item.jumpType)) { this.One(item); } else if (item.jumpType === 0) { this.two(item); @@ -309,26 +309,26 @@ export default class Recording extends Component { } else { this.AllDevice(item); } - + // let report =false // go("/pages/face_report/face_report?id=" + id + "&recordId=" + recordId+ "&report=" + report ); } // 打开第一种类型 One = async (item) => { - + let report = false; - let nursingData=JSON.parse(item.nursingData) - let obj ={ - modeName:item.modeName, - data:nursingData + let nursingData = JSON.parse(item.nursingData) + let obj = { + modeName: item.modeName, + data: nursingData } - console.log("打开第一种类型", item,obj); + console.log("打开第一种类型", item, obj); go( "/recoding/pages/face_report_one/face_report_one?id=" + - item.id + - "&report=" + - report+ "&obj=" + - JSON.stringify(obj) + item.id + + "&report=" + + report + "&obj=" + + JSON.stringify(obj) ); }; // 打开第二种类型 @@ -337,7 +337,7 @@ export default class Recording extends Component { }; // 打开第三种类型 three = async (item) => { - go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${item.nursingData}&date=${item.createTime}&modeId=${item.modeId}`); + go(`/recoding/pages/moisture_test_report/moisture_test_report?data=${item.nursingData}&date=${item.createTime}&modeId=${item.modeId}&id=${item.instrumentId}`); }; // 打开其他类型 AllDevice = async (item) => { diff --git a/src/utils/Interface.js b/src/utils/Interface.js index 185b282..8000548 100644 --- a/src/utils/Interface.js +++ b/src/utils/Interface.js @@ -415,6 +415,15 @@ export const InstrumentInfo = { }); }, }, + fr200:{ + // 查询用户FR200水分报告护理记录 + moistureTest: (data) => { + return Ajax({ + url: "/nursingLog/record/fr200/moistureTest" + paramsToUrlQueryString(data), + method: "get", + }); + }, + } }; //localhost:9204/instrument/getInstrumentInfoBySerial From 992f407cb1245a034e4aae916684a06e24593286 Mon Sep 17 00:00:00 2001 From: rongweikang <1174906669@qq.com> Date: Fri, 22 Mar 2024 09:34:06 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../iotCarePlan/components/Echart/index.less | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less index d3a6450..ddcde5f 100644 --- a/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less +++ b/src/moduleIOT/pages/iotCarePlan/components/Echart/index.less @@ -1,13 +1,41 @@ .box { width: 690rpx; height: 320rpx; - margin: 28rpx auto; + margin: 28rpx auto 150rpx; background-color: #fff; border-radius: 30rpx; padding: 35rpx 25rpx 25rpx 35rpx; box-sizing: border-box; position: relative; } + +.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; + height: 100vw; + transform: rotate(0deg); + } +} + .box_background { position: absolute; top: 0; @@ -29,6 +57,7 @@ position: absolute; top: 32rpx; right: 26rpx; + z-index: 2; } .line { margin: 0 0 6rpx 35rpx;