roomSetting.vue 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192
  1. <template>
  2. <view class="home-warpTwo">
  3. <view class="header_two">
  4. <view class="header">
  5. <view class="item">
  6. <image src="../../static/activePod.png" alt=""> </image>
  7. <text>1</text>
  8. </view>
  9. <view class="line"></view>
  10. <view class="item"
  11. ><image src="../../static/activePod.png" alt=""></image>
  12. <text>2</text>
  13. </view>
  14. <view class="line"></view>
  15. <view class="item"
  16. ><image src="../../static/activePod.png" alt=""></image>
  17. <text>3</text>
  18. </view>
  19. </view>
  20. <view
  21. class="airCantInfo"
  22. :style="{
  23. width: `${length / 200}px`,
  24. height: `${width / 200}px`,
  25. }"
  26. >
  27. <view
  28. v-for="(item, index) in modules"
  29. :key="index"
  30. class="module-content"
  31. >
  32. <view
  33. :class="item.type"
  34. :style="{
  35. width: `${item.width / 2}px`,
  36. height: `${item.length / 2}px`,
  37. top: `${item.top / 2}px`,
  38. left: `${item.left / 2}px`,
  39. transform: `rotate(${item.rotate}deg)`,
  40. 'transform-origin': 'center center',
  41. }"
  42. @touchmove.prevent="onTouchMove(index, $event)"
  43. @touchstart="onTouchStart(index, $event)"
  44. @touchend="onTouchEnd(index, $event)"
  45. >
  46. <image
  47. style="width: 100%; height: 100%; display: block"
  48. :src="`../../static/furnitures/${item.type}.png`"
  49. mode=""
  50. />
  51. </view>
  52. </view>
  53. </view>
  54. <view class="airbody">
  55. <view class="header_top">
  56. <view class="airTitle">室内布置</view>
  57. <view class="addfnt" @click="showAddFt">
  58. <image src="../../static/addfnt.png" alt=""> </image
  59. ><view class="add_btn">添加</view></view
  60. >
  61. </view>
  62. <view class="module">
  63. <view class="device-bottom">
  64. <view v-if="modules.length == 0" class="no-data">
  65. 请先点击添加,添加家具
  66. </view>
  67. <view
  68. class="info-box"
  69. v-for="(item, index) in modules"
  70. :key="index"
  71. >
  72. <image
  73. :src="`../../static/furnitures/${item.type}.png`"
  74. mode=""
  75. />
  76. <view class="info-text">
  77. <text>{{ item.name }}</text>
  78. <text
  79. >({{ item.width }}*{{
  80. item.length
  81. }})cm</text
  82. >
  83. </view>
  84. <view class="edit_del">
  85. <image
  86. @click="deleteItem(index)"
  87. src="../../static/delete.png"
  88. alt=""
  89. ></image>
  90. <image
  91. @click="editItem(index)"
  92. style="margin-left: 10rpx"
  93. src="../../static/edit.png"
  94. alt=""
  95. ></image>
  96. </view>
  97. </view>
  98. </view>
  99. </view>
  100. </view>
  101. <view class="bottomTwo" @click="saveRoom">
  102. <view class="previousTip">保存</view>
  103. </view>
  104. </view>
  105. <!-- 选择家具弹窗 -->
  106. <view>
  107. <!-- 底部弹窗 -->
  108. <view class="bottom-modal" v-if="addfntShow">
  109. <!-- 遮罩层 -->
  110. <view class="modal-mask" @click="addfntShow = false"></view>
  111. <!-- 弹窗内容 -->
  112. <view class="modal-container">
  113. <view class="modal-header">
  114. <text class="header-title">选择家具</text>
  115. </view>
  116. <view class="modal-content">
  117. <view class="device-bottom">
  118. <view
  119. class="item-box"
  120. v-for="(item, index) in selectfntLists"
  121. :key="index"
  122. @click="generate(item.type)"
  123. >
  124. <image
  125. :src="`../../static/furnitures/${item.type}.png`"
  126. mode=""
  127. />
  128. <text
  129. >{{ item.name }}({{ item.width }}*{{
  130. item.length
  131. }})</text
  132. >
  133. </view>
  134. </view>
  135. </view>
  136. <view class="modal-footer">
  137. <button
  138. class="footer-btn cancel"
  139. @click="addfntShow = false"
  140. >
  141. 取消
  142. </button>
  143. <button
  144. class="footer-btn confirm"
  145. @click="addfntShow = false"
  146. >
  147. 确定
  148. </button>
  149. </view>
  150. </view>
  151. </view>
  152. </view>
  153. <!-- 编辑家具弹窗 -->
  154. <view class="device_control" v-if="editfntShow">
  155. <view class="control_info">
  156. <view class="control_left">
  157. <image
  158. :src="`../../static/furnitures/${selectImg}.png`"
  159. class="image_class"
  160. ></image>
  161. </view>
  162. <view class="control_right">
  163. <view class="control_right_top">
  164. <view class="title">长(cm)</view>
  165. <input
  166. type="number"
  167. v-model="selectWidth"
  168. placeholder="请输入长"
  169. @blur="changeSize"
  170. />
  171. </view>
  172. <view class="control_right_bottom">
  173. <view class="title">宽(cm)</view>
  174. <input
  175. type="number"
  176. v-model="selectHeight"
  177. placeholder="请输入宽"
  178. @blur="changeSize"
  179. />
  180. </view>
  181. </view>
  182. </view>
  183. <view class="control_operat" v-if="editfntShow">
  184. <view class="operat_left">
  185. <view class="top">
  186. <image
  187. src="../../static/btn_top.png"
  188. mode="aspectFit"
  189. @click="movefut(0, -10)"
  190. ></image>
  191. </view>
  192. <view class="middle">
  193. <image
  194. src="../../static/btn_left.png"
  195. mode="aspectFit"
  196. @click="movefut(-10, 0)"
  197. ></image>
  198. <image
  199. src="../../static/btn_right.png"
  200. mode="aspectFit"
  201. @click="movefut(10, 0)"
  202. ></image>
  203. </view>
  204. <view class="bottom">
  205. <image
  206. src="../../static/btn_bot.png"
  207. mode="aspectFit"
  208. @click="movefut(0, 10)"
  209. ></image>
  210. </view>
  211. </view>
  212. <view class="operat_right">
  213. <view class="rotate">
  214. <view class="rotate_left" @click="rotatefut(-90)">
  215. <image src="../../static/rote_left.png"></image>
  216. </view>
  217. <view class="rotate_rigt" @click="rotatefut(90)">
  218. <image src="../../static/rote_right.png"></image>
  219. </view>
  220. </view>
  221. <view class="del_funit" @click="editfntShow = false"
  222. >完成</view
  223. >
  224. </view>
  225. </view>
  226. </view>
  227. </view>
  228. </template>
  229. <script>
  230. export default {
  231. name: "my",
  232. data() {
  233. return {
  234. // 设备参数
  235. deviceWidth: 400,
  236. deviceHeight: 500,
  237. modules: [],
  238. width: 0,
  239. length: 0,
  240. selectedIndex: 0,
  241. selectIndex: 0,
  242. controlOptions: [],
  243. startX: 0, // 记录触摸开始时的X坐标
  244. startY: 0, // 记录触摸开始时的Y坐标
  245. draggingIndex: null, // 记录当前正在拖动的模块的索引
  246. selectedItem: [],
  247. rotateShow: false,
  248. selectRotate: "",
  249. selectedRotate: "",
  250. softWare: "",
  251. xOffset: 0,
  252. yOffset: 0,
  253. angle: 0,
  254. xxStart: "",
  255. xxEnd: "",
  256. yyStart: "",
  257. yyEnd: "",
  258. // 控制部分参数
  259. selectImg: "setting",
  260. selectWidth: "",
  261. selectHeight: "",
  262. addfntShow: false,
  263. editfntShow: false,
  264. selectfntLists: [
  265. {
  266. name: "床",
  267. type: "bed",
  268. width: 80,
  269. length: 70,
  270. },
  271. {
  272. name: "柜子",
  273. type: "bed_cabinet",
  274. width: 40,
  275. length: 80,
  276. },
  277. {
  278. name: "化妆椅",
  279. type: "bed_dressing_chair",
  280. width: 40,
  281. length: 40,
  282. },
  283. {
  284. name: "化妆镜",
  285. type: "bed_dressing_mirror",
  286. width: 40,
  287. length: 80,
  288. },
  289. {
  290. name: "床头柜",
  291. type: "bed_table",
  292. width: 40,
  293. length: 40,
  294. },
  295. {
  296. name: "脸盆",
  297. type: "bath_basin",
  298. width: 40,
  299. length: 80,
  300. },
  301. {
  302. name: "门",
  303. type: "bath_door",
  304. width: 40,
  305. length: 40,
  306. },
  307. {
  308. name: "淋浴",
  309. type: "bath_shower",
  310. width: 40,
  311. length: 60,
  312. },
  313. {
  314. name: "马桶",
  315. type: "bath_toilet",
  316. width: 40,
  317. length: 40,
  318. },
  319. {
  320. name: "餐桌(方形)",
  321. type: "dining_table_rect",
  322. width: 40,
  323. length: 40,
  324. },
  325. {
  326. name: "餐桌",
  327. type: "dining_table",
  328. width: 40,
  329. length: 80,
  330. },
  331. {
  332. name: "餐椅",
  333. type: "dining_chair",
  334. width: 40,
  335. length: 80,
  336. },
  337. {
  338. name: "冰箱",
  339. type: "dining_fridge",
  340. width: 40,
  341. length: 80,
  342. },
  343. {
  344. name: "书柜",
  345. type: "living_bookcase",
  346. width: 40,
  347. length: 80,
  348. },
  349. {
  350. name: "沙发",
  351. type: "living_sofa",
  352. width: 40,
  353. length: 80,
  354. },
  355. {
  356. name: "茶几",
  357. type: "living_tea_table",
  358. width: 40,
  359. length: 80,
  360. },
  361. {
  362. name: "电视柜",
  363. type: "living_tv_stand",
  364. width: 40,
  365. length: 80,
  366. },
  367. {
  368. name: "单人沙发",
  369. type: "living_sofa_single",
  370. width: 40,
  371. length: 40,
  372. },
  373. ],
  374. };
  375. },
  376. computed: {},
  377. methods: {
  378. onTouchMove(index, event) {
  379. if (this.draggingIndex === null) return;
  380. const { modules, startX, startY } = this;
  381. const currentX = event.touches[0].clientX;
  382. const currentY = event.touches[0].clientY;
  383. const deltaX = Math.round(currentX - startX);
  384. const deltaY = Math.round(currentY - startY);
  385. let x = Math.round(
  386. this.xxStart + event.currentTarget.offsetLeft * 2
  387. );
  388. let y = Math.round(this.yyEnd - event.currentTarget.offsetTop * 2);
  389. // 创建新数组避免直接修改原数组
  390. const updatedModules = [...this.modules];
  391. updatedModules[this.draggingIndex] = {
  392. ...updatedModules[this.draggingIndex],
  393. left: Math.round(
  394. updatedModules[this.draggingIndex].left + deltaX
  395. ),
  396. top: Math.round(
  397. updatedModules[this.draggingIndex].top + deltaY
  398. ),
  399. x,
  400. y,
  401. };
  402. // Vue 的响应式更新
  403. this.modules = updatedModules;
  404. this.startX = currentX;
  405. this.startY = currentY;
  406. },
  407. onTouchStart(index, event) {
  408. const selectedItem = this.modules[index];
  409. const selectedItemWidth = selectedItem.width / 40;
  410. const selectedItemHeight = selectedItem.length / 40;
  411. this.draggingIndex = index;
  412. this.selectedIndex = index;
  413. this.startX = event.touches[0].clientX;
  414. this.startY = event.touches[0].clientY;
  415. this.selectedItem = selectedItem;
  416. this.selectedItemWidth = selectedItemWidth;
  417. this.selectedItemHeight = selectedItemHeight;
  418. this.selectImg = this.modules[index].type;
  419. this.selectWidth = this.modules[index].width;
  420. this.selectHeight = this.modules[index].length;
  421. },
  422. onTouchEnd(index, event) {
  423. // this.draggingIndex = null;
  424. },
  425. generate(featuriesType) {
  426. let component = {
  427. name: "",
  428. type: featuriesType,
  429. width: 0,
  430. length: 0,
  431. top: 0,
  432. left: 0,
  433. rotate: 0,
  434. };
  435. switch (featuriesType) {
  436. case "bed":
  437. component.width = 80;
  438. component.length = 120;
  439. component.name = "床";
  440. break;
  441. case "bed_cabinet":
  442. component.width = 40;
  443. component.length = 80;
  444. component.name = "柜子";
  445. break;
  446. case "bed_dressing_chair":
  447. component.width = 40;
  448. component.length = 40;
  449. component.name = "化妆椅";
  450. break;
  451. case "bed_dressing_mirror":
  452. component.width = 40;
  453. component.length = 80;
  454. component.name = "化妆镜";
  455. break;
  456. case "bed_table":
  457. component.width = 40;
  458. component.length = 40;
  459. component.name = "床头柜";
  460. break;
  461. case "bath_basin":
  462. component.width = 40;
  463. component.length = 80;
  464. component.name = "脸盆";
  465. break;
  466. case "bath_door":
  467. component.width = 40;
  468. component.length = 40;
  469. component.name = "门";
  470. break;
  471. case "bath_shower":
  472. component.width = 40;
  473. component.length = 60;
  474. component.name = "淋浴";
  475. break;
  476. case "bath_toilet":
  477. component.width = 40;
  478. component.length = 40;
  479. component.name = "马桶";
  480. break;
  481. case "dining_table_rect":
  482. component.width = 40;
  483. component.length = 40;
  484. component.name = "餐桌(方形)";
  485. break;
  486. case "dining_table":
  487. component.width = 40;
  488. component.length = 80;
  489. component.name = "餐桌";
  490. break;
  491. case "dining_chair":
  492. component.width = 40;
  493. component.length = 80;
  494. component.name = "餐椅";
  495. break;
  496. case "dining_fridge":
  497. component.width = 40;
  498. component.length = 80;
  499. component.name = "冰箱";
  500. break;
  501. case "living_bookcase":
  502. component.width = 40;
  503. component.length = 80;
  504. component.name = "书柜";
  505. break;
  506. case "living_sofa":
  507. component.width = 40;
  508. component.length = 80;
  509. component.name = "沙发";
  510. break;
  511. case "living_tea_table":
  512. component.width = 40;
  513. component.length = 80;
  514. component.name = "茶几";
  515. break;
  516. case "living_tv_stand":
  517. component.width = 40;
  518. component.length = 80;
  519. component.name = "电视柜";
  520. break;
  521. case "living_sofa_single":
  522. component.width = 40;
  523. component.length = 40;
  524. component.name = "单人沙发";
  525. break;
  526. default:
  527. break;
  528. }
  529. component.type = featuriesType;
  530. if (component !== null) {
  531. this.modules.push(component);
  532. }
  533. },
  534. // 输入宽高改变家具大小
  535. changeSize() {
  536. this.modules[this.draggingIndex].length = this.selectHeight;
  537. this.modules[this.draggingIndex].width = this.selectWidth;
  538. },
  539. movefut(left, top) {
  540. this.modules[this.draggingIndex].left =
  541. this.modules[this.draggingIndex].left + left;
  542. this.modules[this.draggingIndex].top =
  543. this.modules[this.draggingIndex].top + top;
  544. console.log(this.modules[this.draggingIndex], 999);
  545. },
  546. rotatefut(rotate) {
  547. let item = this.modules[this.draggingIndex];
  548. if (item.rotate == 0) {
  549. item.rotate = 360;
  550. }
  551. let currentRotate = item.rotate || 0;
  552. let newAngle = (currentRotate + rotate) % 360;
  553. this.modules[this.draggingIndex].rotate = newAngle;
  554. },
  555. deleteItem(index) {
  556. this.draggingIndex = index;
  557. if (this.draggingIndex === null) {
  558. return this.showModal("提示", "请先选择家具");
  559. }
  560. this.showModal("提示", "是否确认删除该家具", (res) => {
  561. if (res.confirm) {
  562. this.modules.splice(this.draggingIndex, 1);
  563. this.draggingIndex = null;
  564. }
  565. });
  566. },
  567. editItem(index) {
  568. this.draggingIndex = index;
  569. this.editfntShow = true;
  570. const selectedItem = this.modules[index];
  571. const selectedItemWidth = selectedItem.width / 40;
  572. const selectedItemHeight = selectedItem.length / 40;
  573. this.draggingIndex = index;
  574. this.selectedIndex = index;
  575. this.selectedItem = selectedItem;
  576. this.selectedItemWidth = selectedItemWidth;
  577. this.selectedItemHeight = selectedItemHeight;
  578. this.selectImg = this.modules[index].type;
  579. this.selectWidth = this.modules[index].width;
  580. this.selectHeight = this.modules[index].length;
  581. },
  582. // 提取公共的模态框方法
  583. showModal(title, content, confirmCallback) {
  584. wx.showModal({
  585. title,
  586. content,
  587. success: (res) => {
  588. if (res.confirm && confirmCallback) {
  589. confirmCallback(res);
  590. }
  591. },
  592. });
  593. },
  594. saveRoom() {
  595. this.$http
  596. .post(
  597. "wap/room/saveRoom",
  598. JSON.stringify({
  599. devId: this.devId,
  600. furnitures: this.modules,
  601. }),
  602. {
  603. header: {
  604. "Content-Type": "application/json;charset=UTF-8",
  605. },
  606. }
  607. )
  608. .then((res) => {
  609. if (res.data.code == 200) {
  610. uni.showToast({
  611. title: "保存成功",
  612. icon: "none",
  613. duration: 1500,
  614. });
  615. setTimeout(() => {
  616. uni.reLaunch({
  617. url: "/pages/home/home",
  618. });
  619. }, 1500);
  620. } else {
  621. uni.showToast({
  622. title: res.data.msg,
  623. icon: "none",
  624. duration: 1500,
  625. });
  626. }
  627. })
  628. .catch((err) => {
  629. // console.log(err, 8888);
  630. });
  631. // console.log(this.modules, 999);
  632. },
  633. showAddFt() {
  634. this.addfntShow = true;
  635. },
  636. getdevInfo(devId) {
  637. this.$http
  638. .get(`wap/device/queryDeviceInfoById/${devId}`, {})
  639. .then((res) => {
  640. if (res.data.data) {
  641. this.devInfo = res.data.data;
  642. this.width =
  643. Math.abs(
  644. this.devInfo.yyEnd - this.devInfo.yyStart
  645. ) * 100;
  646. this.length =
  647. Math.abs(
  648. this.devInfo.xxEnd - this.devInfo.xxStart
  649. ) * 100;
  650. this.xOffset =
  651. (this.devInfo.xxStart + this.devInfo.xxEnd) * 50;
  652. this.yOffset =
  653. -(this.devInfo.yyStart + this.devInfo.yyStart) * 50;
  654. this.statusLight = this.devInfo.statusLight;
  655. this.xxStart = this.devInfo.xxStart;
  656. this.xxEnd = this.devInfo.xxEnd;
  657. this.yyStart = this.devInfo.yyStart;
  658. this.yyEnd = this.devInfo.yyEnd;
  659. } else {
  660. uni.showToast({
  661. title: res.data.message,
  662. icon: "none",
  663. });
  664. }
  665. })
  666. .catch((err) => {
  667. console.log(err, 8888);
  668. });
  669. },
  670. getRoomInfo(devId) {
  671. this.$http
  672. .get(`wap/room/readRoom`, {
  673. devId: devId,
  674. })
  675. .then((res) => {
  676. if (res.data.data) {
  677. this.modules = res.data.data.furnitures;
  678. }
  679. });
  680. },
  681. },
  682. onLoad(options) {
  683. this.devId = options.devId;
  684. this.getdevInfo(this.devId);
  685. this.getRoomInfo(this.devId);
  686. },
  687. onShow() {},
  688. };
  689. </script>
  690. <style lang="less" scoped>
  691. .home-warpTwo {
  692. position: relative;
  693. height: 100vh;
  694. background: #f4f4f4;
  695. .header_two {
  696. width: 750rpx;
  697. border-bottom-left-radius: 35rpx;
  698. border-bottom-right-radius: 35rpx;
  699. background: linear-gradient(180deg, #faede2 0%, #ffffff 100%);
  700. .header {
  701. display: flex;
  702. align-items: center;
  703. justify-content: space-between;
  704. padding: 0rpx 120rpx;
  705. // padding-top: 30rpx;
  706. .item {
  707. position: relative;
  708. text-align: center;
  709. width: 70rpx;
  710. height: 75rpx;
  711. image {
  712. width: 45rpx;
  713. height: 50rpx;
  714. }
  715. text {
  716. position: absolute;
  717. top: 33%;
  718. left: 50%;
  719. transform: translate(-50%, -50%);
  720. font-weight: 700;
  721. color: #ffffff;
  722. font-size: 30rpx;
  723. text-align: center;
  724. }
  725. }
  726. .line {
  727. width: 56rpx;
  728. height: 4rpx;
  729. margin-bottom: 10rpx;
  730. background-color: #e4c5b9;
  731. }
  732. }
  733. .airCantInfo {
  734. margin: 30rpx auto 0 auto;
  735. border: 18rpx solid #1f1f1f;
  736. position: relative;
  737. .module-content > view {
  738. position: absolute;
  739. }
  740. }
  741. .airbody {
  742. margin: 80rpx auto 0 auto;
  743. width: 700rpx;
  744. background: #ffffff;
  745. border-radius: 38rpx;
  746. box-sizing: border-box;
  747. .header_top {
  748. padding: 0rpx 40rpx;
  749. display: flex;
  750. justify-content: space-between;
  751. align-items: center;
  752. .airTitle {
  753. font-weight: 500;
  754. color: #784c41;
  755. font-size: 32rpx;
  756. padding-left: 20rpx;
  757. padding-top: 20rpx;
  758. }
  759. .addfnt {
  760. display: flex;
  761. align-items: center;
  762. image {
  763. margin-top: 7rpx;
  764. width: 25rpx;
  765. height: 25rpx;
  766. }
  767. .add_btn {
  768. margin-left: 10rpx;
  769. font-size: 32rpx;
  770. }
  771. }
  772. }
  773. .module {
  774. padding: 10rpx 30rpx;
  775. bottom: 0;
  776. box-sizing: border-box;
  777. width: 100%;
  778. background: #ffffff;
  779. border-radius: 20rpx 20rpx 20rpx 20rpx;
  780. .device-bottom {
  781. margin-top: 20rpx;
  782. height: 500rpx;
  783. overflow-y: scroll;
  784. .no-data {
  785. margin-top: 100rpx;
  786. text-align: center;
  787. }
  788. .info-box {
  789. display: flex;
  790. align-items: center;
  791. // width: 620rpx;
  792. padding: 0 30rpx;
  793. height: 110rpx;
  794. background: #f8f8f8;
  795. border-radius: 38rpx;
  796. border-radius: 20rpx 20rpx 20rpx 20rpx;
  797. font-family: PingFang SC, PingFang SC;
  798. font-weight: 400;
  799. font-size: 26rpx;
  800. .info-text {
  801. display: flex;
  802. flex-direction: column;
  803. margin-left: 20rpx;
  804. }
  805. image {
  806. margin-bottom: 10rpx;
  807. width: 75rpx;
  808. height: 75rpx;
  809. }
  810. .edit_del {
  811. margin-left: auto;
  812. image {
  813. width: 40rpx;
  814. height: 40rpx;
  815. }
  816. }
  817. }
  818. .info-box:not(:first-child) {
  819. margin-top: 20rpx;
  820. }
  821. }
  822. .device_control {
  823. overflow: hidden;
  824. margin-top: 20rpx;
  825. .control_info {
  826. height: 160rpx;
  827. background: #f8f8f8;
  828. border-radius: 37rpx;
  829. box-sizing: border-box;
  830. padding: 20rpx 30rpx;
  831. display: flex;
  832. align-content: center;
  833. justify-content: center;
  834. .control_left {
  835. width: 110rpx;
  836. height: 110rpx;
  837. .image_class {
  838. width: 110rpx;
  839. height: 110rpx;
  840. }
  841. }
  842. .control_right {
  843. margin-left: 100rpx;
  844. .control_right_top {
  845. width: 280rpx;
  846. height: 50rpx;
  847. display: flex;
  848. justify-content: space-around;
  849. align-items: center;
  850. background: #ffffff;
  851. border-radius: 18rpx;
  852. .title {
  853. color: #a0acbe;
  854. font-size: 28rpx;
  855. }
  856. input {
  857. width: 130rpx;
  858. color: #a0acbe;
  859. }
  860. }
  861. .control_right_bottom {
  862. width: 280rpx;
  863. height: 50rpx;
  864. display: flex;
  865. justify-content: space-around;
  866. align-items: center;
  867. margin-top: 10rpx;
  868. background: #ffffff;
  869. border-radius: 18rpx;
  870. .title {
  871. color: #a0acbe;
  872. font-size: 28rpx;
  873. }
  874. input {
  875. width: 130rpx;
  876. color: #a0acbe;
  877. }
  878. }
  879. }
  880. }
  881. }
  882. }
  883. }
  884. .bottomTwo {
  885. display: flex;
  886. align-items: center;
  887. justify-content: center;
  888. position: fixed;
  889. bottom: 0;
  890. left: 0;
  891. width: 750rpx;
  892. height: 120rpx;
  893. background: #f3e2dd;
  894. .previousTip {
  895. font-weight: 500;
  896. color: #111111;
  897. font-size: 32rpx;
  898. }
  899. }
  900. }
  901. .bottom-modal {
  902. position: fixed;
  903. top: 0;
  904. left: 0;
  905. right: 0;
  906. bottom: 0;
  907. z-index: 999;
  908. display: flex;
  909. flex-direction: column;
  910. // 遮罩层
  911. .modal-mask {
  912. position: absolute;
  913. top: 0;
  914. left: 0;
  915. right: 0;
  916. bottom: 0;
  917. background-color: rgba(0, 0, 0, 0.5);
  918. transition: all 0.3s ease;
  919. }
  920. // 弹窗容器
  921. .modal-container {
  922. position: fixed;
  923. left: 0;
  924. right: 0;
  925. bottom: 0;
  926. background-color: #fff;
  927. border-radius: 16rpx 16rpx 0 0;
  928. max-height: 70vh;
  929. display: flex;
  930. flex-direction: column;
  931. transform: translateY(0);
  932. transition: transform 0.3s ease;
  933. box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
  934. // 头部样式
  935. .modal-header {
  936. position: relative;
  937. padding: 30rpx;
  938. text-align: center;
  939. border-bottom: 1rpx solid #f5f5f5;
  940. .header-title {
  941. font-size: 32rpx;
  942. font-weight: 500;
  943. color: #333;
  944. }
  945. }
  946. // 内容区域
  947. .modal-content {
  948. height: 600rpx;
  949. overflow-y: scroll;
  950. .device-bottom {
  951. display: flex;
  952. flex-wrap: wrap;
  953. justify-content: space-between;
  954. gap: 20rpx;
  955. padding: 0 30rpx;
  956. box-sizing: border-box;
  957. .item-box {
  958. display: flex;
  959. flex-direction: column;
  960. align-items: center;
  961. justify-content: center;
  962. width: 200rpx;
  963. height: 160rpx;
  964. background: #f5f7fa;
  965. border-radius: 20rpx 20rpx 20rpx 20rpx;
  966. font-family: PingFang SC, PingFang SC;
  967. font-weight: 400;
  968. font-size: 26rpx;
  969. image {
  970. margin-bottom: 20rpx;
  971. width: 40rpx;
  972. height: 40rpx;
  973. }
  974. }
  975. }
  976. }
  977. // 底部按钮
  978. .modal-footer {
  979. display: flex;
  980. padding: 20rpx 30rpx;
  981. border-top: 1rpx solid #f5f5f5;
  982. .footer-btn {
  983. flex: 1;
  984. height: 80rpx;
  985. line-height: 80rpx;
  986. border-radius: 40rpx;
  987. font-size: 28rpx;
  988. margin: 0 10rpx;
  989. &.cancel {
  990. border: none;
  991. background-color: #f5f5f5;
  992. color: #666;
  993. }
  994. &.confirm {
  995. border: none;
  996. background-color: #f3e2dd;
  997. color: #111111;
  998. }
  999. }
  1000. }
  1001. }
  1002. }
  1003. // 动画效果
  1004. .modal-enter-active,
  1005. .modal-leave-active {
  1006. transition: all 0.7s;
  1007. .modal-mask {
  1008. opacity: 1;
  1009. }
  1010. .modal-container {
  1011. transform: translateY(0);
  1012. }
  1013. }
  1014. .modal-enter,
  1015. .modal-leave-to {
  1016. .modal-mask {
  1017. opacity: 0;
  1018. }
  1019. .modal-container {
  1020. transform: translateY(100%);
  1021. }
  1022. }
  1023. // 编辑弹窗
  1024. .device_control {
  1025. position: fixed;
  1026. left: 0;
  1027. right: 0;
  1028. bottom: 0;
  1029. z-index: 999;
  1030. height: 550rpx;
  1031. background: #f8f8f8;
  1032. border-radius: 37rpx 37rpx 0 0;
  1033. box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
  1034. padding: 30rpx;
  1035. display: flex;
  1036. flex-direction: column;
  1037. // 控制区域(原control_info)
  1038. .control_info {
  1039. display: flex;
  1040. align-items: space-around;
  1041. margin-bottom: 40rpx; // 与操作区域间距
  1042. .control_left {
  1043. margin-left: 100rpx;
  1044. .image_class {
  1045. width: 120rpx;
  1046. height: 120rpx;
  1047. }
  1048. }
  1049. .control_right {
  1050. flex: 1;
  1051. margin-left: 100rpx;
  1052. display: flex;
  1053. flex-direction: column;
  1054. justify-content: space-between;
  1055. .control_right_top,
  1056. .control_right_bottom {
  1057. display: flex;
  1058. align-items: center;
  1059. .title {
  1060. font-size: 28rpx;
  1061. color: #666;
  1062. margin-bottom: 10rpx;
  1063. }
  1064. input {
  1065. width: 40%;
  1066. height: 60rpx;
  1067. background: #fff;
  1068. border-radius: 12rpx;
  1069. padding: 0 20rpx;
  1070. }
  1071. }
  1072. }
  1073. }
  1074. .control_operat {
  1075. display: flex;
  1076. flex: 1;
  1077. padding: 0 30rpx;
  1078. .operat_left {
  1079. width: 300rpx;
  1080. display: flex;
  1081. flex-direction: column;
  1082. align-items: center;
  1083. .top,
  1084. .middle,
  1085. .bottom {
  1086. width: 100%;
  1087. display: flex;
  1088. justify-content: center;
  1089. }
  1090. .middle {
  1091. justify-content: space-between;
  1092. margin: 15rpx 0;
  1093. }
  1094. image {
  1095. width: 80rpx;
  1096. height: 80rpx;
  1097. background: #fff;
  1098. border-radius: 50%;
  1099. padding: 15rpx;
  1100. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  1101. }
  1102. }
  1103. .operat_right {
  1104. flex: 1;
  1105. display: flex;
  1106. flex-direction: column;
  1107. align-items: flex-end;
  1108. padding-top: 70rpx;
  1109. .rotate {
  1110. display: flex;
  1111. margin-bottom: 30rpx;
  1112. .rotate_left,
  1113. .rotate_rigt {
  1114. width: 100rpx;
  1115. height: 70rpx;
  1116. background: #fff;
  1117. border-radius: 12rpx;
  1118. display: flex;
  1119. align-items: center;
  1120. justify-content: center;
  1121. box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  1122. image {
  1123. width: 40rpx;
  1124. height: 40rpx;
  1125. }
  1126. }
  1127. .rotate_rigt {
  1128. margin-left: 20rpx;
  1129. }
  1130. }
  1131. .del_funit {
  1132. width: 220rpx;
  1133. height: 70rpx;
  1134. background: #7b4f43;
  1135. color: white;
  1136. border-radius: 12rpx;
  1137. display: flex;
  1138. align-items: center;
  1139. justify-content: center;
  1140. font-size: 28rpx;
  1141. }
  1142. }
  1143. }
  1144. }
  1145. }
  1146. </style>