.positionPage { background-color: rgba(255, 255, 255, 1); position: relative; // overflow: hidden; .listBox { width: 100%; .positionBox1 { .searchRow { padding: 0.5rem 0.5rem; .bd3 { width: 2.1rem; // height: 16px; .outer4 { width: 0.4rem; height: 0.4rem; background: url("../../assets/home/positionIcon.png") top center no-repeat; background-size: 100%; } .outer2 { width: 16px; height: 16px; background: url("../../assets/position/hisBillIcon.png") top center no-repeat; background-size: 100%; } .txt2 { // width: 65px; // height: 15px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 0.4rem; font-family: 'Noto Sans SC', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: bold; text-align: left; white-space: nowrap; line-height: 0.4rem; display: block; } } .main5 { width: auto; cursor: pointer; .label2 { width: 0.5rem; height: 0.5rem; margin-right: 5px; } } } .pic1 { width: 100%; height: 2px; } .holdings { /* 父元素宽度的10%作为左右边距 */ padding-left: 10%; padding-right: 10%; margin-left: 2%; margin-right: 2%; border: 2px solid transparent; border-radius: 10px; /* 设置圆角的半径 */ background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(90deg, #f561a1, #ff9a5c); padding: 0 10%; overflow: hidden; } /* 使用 /deep/ 或 ::v-deep 来确保样式穿透组件的作用域 */ .holdings ::v-deep .van-cell { --van-cell-text-color: #f561a1; /* 覆盖文本颜色为蓝色 */ } /* 如果您需要为值(value)设置不同的颜色,可以覆盖 van-cell__value 的颜色 */ .holdings ::v-deep .van-cell__value { color: #f89947; /* 例如,设置为红色 */ } .o-ptb-20 { padding-top: 5px; padding-bottom: 10px; .bd1 { width: 100%; // height: 108px; background: url(../../assets/home/outer.png) no-repeat; background-size: 100% 100%; padding: 0.6rem 0.2rem; .box2 { // width: 100%; // height: 100%; .TextGroup { height: 57px; width: 48px; .main6 { width: 48px; height: 57px; .word5 { height: 26px; overflow-wrap: break-word; color: #ff5d88; font-size: 22px; font-family: Helvetica; text-align: center; white-space: nowrap; line-height: 26px; display: block; } .word6 { height: 17px; overflow-wrap: break-word; color: #39a6fe; font-size: 12px; text-align: center; white-space: nowrap; line-height: 17px; margin-top: 14px; display: block; } .green-color { color: #2ce39d; } } } } } } } .positionBox2 { width: 100%; .section1 { background-color: rgba(255, 255, 255, 1); margin-top: 1px; width: 100%; .outer1 { width: 100%; .bd1 { width: 100%; // height: 15px; .layer1 { background-color: #8096ec; border-radius: 2px; width: 4px; height: 12px; // margin-top: 4px; } .txtBox { width: 7rem; // overflow: auto; .txt1 { white-space: nowrap; color: rgba(64, 77, 116, 1); font-size: 0.4rem; font-family: PingFangSC-Medium; text-align: left; line-height: 0.7rem; display: block; margin: 0 0 0 6px; // overflow: hidden; white-space: normal; text-overflow: ellipsis; } } .layer2 { height: 0.6rem; background: url("../../assets/device/powerOff.png") 100% no-repeat; background-size: 100%; width: 0.6rem; // margin-left: 30px; &.layerLeft { margin-left: 5px; } &.deviceOn { background: url("../../assets/device/powerOn.png") 100% no-repeat; background-size: 100%; } } .flash-icon { animation: blink-animation 0.5s infinite; // 定义闪烁动画,1s表示1秒,infinite表示无限循环 } @keyframes blink-animation { 0% { opacity: 1; // 初始状态完全显示 } 50% { opacity: 0; // 中间状态隐藏 } 100% { opacity: 1; // 结束状态完全显示 } } .box4 { height: 0.7rem; background: url("../../assets/device/alarm.png") 100% no-repeat; background-size: 100%; width: 0.7rem; } } .txt1 { width: 100%; color: rgba(64, 77, 116, 1); font-size: 0.375rem; line-height: 0.5rem;; display: flex; align-items: center; } .pic1 { width: 100%; height: 2px; // margin-top: 19px; } .contentBottomCon { background-color: #e7e7e7; border-radius: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */ padding: 5px 5px; .contentWord { width: 100%; padding: 10px 10px; color: rgba(64, 77, 116, 1); font-size: 0.375rem; text-align: left; flex-wrap: wrap; line-height: 0.375rem; display: flex; align-items: center; .word10 { width: 65% // display: block; } .word2 { width: 75%; padding: 0 0; .van-cell--center { background-color: #e7e7e7; } .van-field__control { border: 0.5px solid #ccc; background-color: #fff; padding: 2px 5px; border-radius: 3px; // width: 40%; /* 添加边框 */ } .van-field__body { background-color: #e7e7e7; } } .word3 { width: 50%; // padding: 0 0; margin-right: 10px; line-height: 0.5rem; } .editIcon { color: #4d6add; // padding: 0 0 0 5px; } .btn { justify-content: flex-end; } .clickable-link { // text-decoration: underline; cursor: pointer; font-size: 0.375rem; width: 80%; // display: flex; // flex-wrap: wrap; // padding-right: 1rem; // margin-right: 1rem; line-height: 0.5rem;; } } // .word11 { // width: 95%; // padding: 10px 10px; // // overflow-wrap: break-word; // color: rgba(64, 77, 116, 1); // font-size: 14px; // text-align: left; // // white-space: nowrap; // // text-overflow: ellipsis; // line-height: 14px; // display: flex; // align-items: center; // // justify-content: space-between; // .word12 { // width: 65%; // } // } .van-button--primary { background-color: #4d6add; padding: 0 5px; margin: 0 5px 0 0; height: 30px !important; } .layer2 { width: 100%; } .layer3 { width: 100%; display: flex; align-items: center; .word1 { text-overflow: ellipsis; width: 100%; font-size: 14px; } .word3 { color: rgba(64, 77, 116, 1); width: 70%; } .editIcon { color: #4d6add; padding: 0 0 0px 5px; } } .layer5 { // width: 100%; padding: 10px 10px; .word5 { // width: 33.33%; // overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 0.375rem; // text-align: left; // line-height: 0.8rem; // display: block; } // .word6 { // // width: 33.33%; // overflow-wrap: break-word; // color: rgba(64, 77, 116, 1); // font-size: 14px; // line-height: 13px; // display: block; // } } .info1 { overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; display: block; } .info2 { overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; display: block; } .info3 { overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; } .info4 { width: 60%; } .info5 { overflow-wrap: break-word; word-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; max-width: 100%; } .editDeviceBtnCon { .box2 { width: 0.5rem; height: 0.5rem; background: url("../../assets/order/gotoRight.png") no-repeat; background-size: 100%; // margin-top: 0.2rem; } .c-text-14 { display: inline-block; /* 将行内文本转为块级元素 */ padding: 0.1rem 0.5rem; /* 添加内边距 */ background-color: #df5e4c; border-radius: 0.5rem; /* 添加圆角效果 */ color: #fff; /* 设置文本颜色 */ cursor: pointer; /* 设置光标样式 */ } } .bd8 { width: 345px; height: 18px; margin: 20px 0 0 15px; .outer5 { background-color: rgba(128, 150, 236, 1); border-radius: 2px; width: 4px; height: 12px; margin-top: 4px; } .txt6 { width: 176px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 15px; display: block; margin: 3px 0 0 6px; } .outer6 { width: 18px; height: 18px; background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng164fc6854bc0badab9c36f9e9751c42ceda02742fc5e78f7662ced4a0f76844c) 100% no-repeat; margin-left: 141px; } } .txt7 { width: 242px; height: 20px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 20px; display: block; margin: 8px 0 0 15px; } .word8 { width: 262px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 13px; display: block; margin: 10px 0 0 15px; } .bd9 { width: 61px; height: 17px; margin: 15px 0 0 157px; .txt8 { width: 48px; height: 17px; overflow-wrap: break-word; color: rgba(135, 135, 166, 1); font-size: 14px; text-align: center; white-space: nowrap; line-height: 17px; display: block; } .block1 { width: 10px; height: 4px; background: url("../../assets/device/deviceSelect.png") 0px -1px no-repeat; margin-top: 7px; } } .bd10 { width: 345px; height: 1px; background: url("../../assets/home/line.png") -1px 0px no-repeat; margin: 15px 0 0 15px; } .bd11 { width: 345px; height: 18px; margin: 20px 0 0 15px; .section3 { background-color: rgba(128, 150, 236, 1); border-radius: 2px; width: 4px; height: 12px; margin-top: 4px; } .txt9 { width: 176px; height: 13px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; font-family: PingFangSC-Medium; text-align: left; white-space: nowrap; line-height: 15px; display: block; margin: 3px 0 0 6px; } .section4 { width: 22px; height: 15px; background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/be1271ed70774869b81ed2d5f43b6a44_mergeImage.png) 100% no-repeat; margin: 3px 0 0 111px; } .section5 { height: 18px; background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/5723fcdad1574aef9e65c326de33d8b2_mergeImage.png) 100% no-repeat; margin-left: 8px; width: 18px; .box3 { background-color: rgba(255, 255, 255, 1); border-radius: 1px; width: 2px; height: 7px; margin: 2px 0 0 8px; } } } .txt10 { width: 242px; height: 20px; overflow-wrap: break-word; color: rgba(64, 77, 116, 1); font-size: 14px; text-align: left; white-space: nowrap; line-height: 20px; display: block; margin: 8px 0 0 15px; } } .sugarTxt { color: rgba(64, 77, 116, 1); font-size: 0.375rem; // line-height: 0.8rem; padding: 10px 10px; } .bd6 { width: 100%; border-bottom: 1px solid #eee; .info2 { overflow-wrap: break-word; color: rgb(77, 106, 221); font-size: 14px; text-align: center; white-space: nowrap; display: block; } .group2 { width: 10px; height: 5px; background: url("../../assets/device/deviceSelect.png") center no-repeat; background-size: 100%; &.checkType { transform: scaleY(-1); } } } } } } } } .passwordIdx { overflow: hidden; overflow-y: auto; .headerCon { .line { background-color: #8096ec; border-radius: 2px; width: 4px; height: 16px; } } } .van-button--primary { background-color: #4d6add; border-color: #4d6add; } .van-dropdown-menu__title--active { color: #4d6add; } .van-dropdown-item__option--active, .van-dropdown-item__option--active .van-dropdown-item__icon { color: #4d6add; } .van-dropdown-menu__title { color: #4d6add; } :root { --van-width: auto; --van-popover-action-width: var(--van-width); }