From c64ff8db7bd5de4e89ef3d303da7bcfa5d00d264 Mon Sep 17 00:00:00 2001 From: Teng <461587751@qq.com> Date: Fri, 9 Jan 2026 16:23:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/NursingNew/component/index.vue | 12 +- pages/NursingNew/component/nurse/bigindex.css | 549 +++++ pages/NursingNew/component/nurse/bigindex.vue | 619 ++++++ .../component/nurse/index - 副本.vue | 1816 ---------------- pages/NursingNew/component/nurse/index.css | 1835 +++++++++++++++-- pages/NursingNew/component/nurse/index.vue | 1583 +++++++++++--- pages/NursingNew/index.vue | 24 +- 7 files changed, 4215 insertions(+), 2223 deletions(-) create mode 100644 pages/NursingNew/component/nurse/bigindex.css create mode 100644 pages/NursingNew/component/nurse/bigindex.vue delete mode 100644 pages/NursingNew/component/nurse/index - 副本.vue diff --git a/pages/NursingNew/component/index.vue b/pages/NursingNew/component/index.vue index ef907ec..e29c678 100644 --- a/pages/NursingNew/component/index.vue +++ b/pages/NursingNew/component/index.vue @@ -724,7 +724,7 @@ const openleft = ref(false) const menutarget = ref(0) - const emit = defineEmits(['swip']) + const emit = defineEmits(['swip',"gospecial"]) const clickmenu = (index : number) => { menutarget.value = index let data = filteredMenu(0)[index] @@ -985,15 +985,7 @@ })) ) const nusing = ()=>{ - uni.setStorage({ - key: 'myArray', - data: timearr.value, - success: function () { - uni.navigateTo({ - url: `/pages/timeMatrix/indexnew` - }) - }, - }); + emit('gospecial',1) } const jszlshow = ref(false) diff --git a/pages/NursingNew/component/nurse/bigindex.css b/pages/NursingNew/component/nurse/bigindex.css new file mode 100644 index 0000000..d340eb3 --- /dev/null +++ b/pages/NursingNew/component/nurse/bigindex.css @@ -0,0 +1,549 @@ +.super-card { + display: flex; + width: 100%; + + .super-card-container { + background-blend-mode: screen; + isolation: isolate; + overflow: hidden; + margin-left: 10rpx; + width: 1455rpx; + border-left: 0; + position: relative; + border-radius: 30rpx; + overflow: hidden; + border: 3rpx dashed #dde1e6; + } + + .super-card-right { + border-right: 1rpx solid transparent; + border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; + } + + .super-card-time { + display: flex; + justify-content: center; + align-items: center; + + height: 50rpx; + width: 289.3rpx; + border-bottom: 1rpx solid transparent; + border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; + /* font-weight: 700; */ + z-index: -1; + font-size: 25rpx; + color: #A9ACB1; + background-color: #EDF3FD; + } + + .super-card-time-und { + display: flex; + justify-content: center; + align-items: center; + width: 290rpx; + flex-direction: column; + + border-right: 1rpx solid transparent; + border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; + + .title-time-img { + width: 65rpx; + height: 65rpx; + margin-top: -5rpx; + } + + .title-time-font-rel { + font-size: 32rpx; + font-weight: 600; + /* margin-bottom: 5rpx; */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: black; + } + .title-time-font-tags{ + font-size: 24rpx; + font-weight: 600; + /* margin-bottom: 5rpx; */ + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #999; + } + .title-time-items { + display: flex; + justify-content: space-around; + align-items: center; + + .right-box-items-button { + width: 35rpx; + height: 35rpx; + margin: 0 5rpx; + } + } + } + + .super-card-time-card { + display: flex; + justify-content: center; + align-items: center; + height: 234rpx; + width: 100%; + transition: all 0.8s; + border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; + flex-direction: column; + position: relative; + + } +} + +.right-container { + width: calc(100% - 260rpx); + height: 100vh; + transition: opacity 1s ease; + position: relative; + margin-left: -50rpx; + + .joystick { + position: absolute; + bottom: 200rpx; + left: 20rpx; + width: 300rpx; + height: 300rpx; + z-index: 9999; + } + + .outer-circle { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: rgba(127, 127, 127, 0.1); + position: relative; + } + + .inner-circle { + width: 120rpx; + height: 120rpx; + border-radius: 50%; + background-color: rgba(127, 127, 127, 0.3); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .doctorsay-container-view { + width: 100%; + height: 1350rpx; + display: flex; + margin-top: 62rpx; + + .doctorsay-container-container { + width: 100%; + overflow: hidden; + } + } +} + +.title-time-blue { + /* 你的定位与尺寸保持不变 */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90%; + height: 88%; + z-index: 10; + + --color: #99C9FD; + --thick: 2px; + --radius: 16px; + + border: var(--thick) dashed var(--color); + border-radius: var(--radius); + + background: + /* 上边 */ + repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / 100% var(--thick) no-repeat, + /* 下边 */ + repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) bottom left / 100% var(--thick) no-repeat, + /* 左边 */ + repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / var(--thick) 100% no-repeat, + /* 右边 */ + repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top right / var(--thick) 100% no-repeat; +} + + +.time-button-orange-spe { + transition: all 1s; + position: absolute; + width: 280rpx; + height: 100rpx; + padding: 0 20rpx; + border-radius: 20rpx; + border-top-right-radius: 0rpx; + border: 2rpx solid #e8e9eb; + background-color: #fff; + color: #545569; + bottom: -100rpx; + left: -130rpx; + display: flex; + justify-content: center; + align-items: center; + z-index: 999; + +} + +.time-button-orange { + transition: all 1s; + position: absolute; + width: 280rpx; + height: 100rpx; + border-radius: 20rpx; + padding: 0 20rpx; + border: 2rpx solid #e8e9eb; + border-bottom-right-radius: 0rpx; + background-color: #fff; + top: -90rpx; + left: -130rpx; + color: #545569; + display: flex; + justify-content: center; + align-items: center; + z-index: 999; + +} + +.title-time { + display: flex; + width: 100%; + position: relative; + height: 100%; + padding: 20rpx; + + .card-time{ + position: absolute; + bottom: 20rpx; + left: 20rpx; + font-size: 27rpx; + } + .card-time-red{ + position: absolute; + bottom: 20rpx; + left: 20rpx; + font-size: 27rpx; + color: #E33B3B; + } + .card-time-blue{ + position: absolute; + bottom: 20rpx; + left: 20rpx; + font-size: 27rpx; + color: #4690FF; + } + + .title-time-time { + font-size: 32rpx; + margin: 0 auto; + font-weight: 600; + } + + .title-time-button { + position: absolute; + top: -6rpx; + right: -4rpx; + width: 55rpx; + height: 40rpx; + } + + .title-time-font { + position: absolute; + top: 0rpx; + right: 4rpx; + font-size: 20rpx; + color: #1083f8; + } +} + +.title-time-border { + margin-top: 4rpx; + margin-left: 4rpx; + width: calc(100% - 8rpx); + height: calc(100% - 8rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + flex-direction: column; +} + +.title-time-border-big { + transform: scale(1.3); + transform-origin: top; + border-top: 0rpx solid #fff; + transition: transform 0.5s ease-out, opacity 0.5s ease-out; + z-index: 999; + display: flex; + justify-content: center; + align-items: center; + height: 226rpx; + width: 100%; + border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; + flex-direction: column; + position: relative; +} + +.title-time-border-big-top { + transform: scale(1.3); + transform-origin: top; + border-top: 0rpx solid #fff; + transition: transform 0.5s ease-out, opacity 0.5s ease-out; + z-index: 999; + display: flex; + justify-content: center; + align-items: center; + height: 226rpx; + width: 100%; + border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; + flex-direction: column; + position: relative; +} + +.title-time-border-yellow { + margin: 10rpx; + border: 2rpx solid #e5e6e6; + width: calc(100% - 40rpx); + height: calc(100% - 40rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + background-color: #F7F8F9; + flex-direction: column; + +} +.title-time-border-hisOk{ + margin: 10rpx; + border: 2rpx solid #D4E4FE; + width: calc(100% - 40rpx); + height: calc(100% - 40rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + background-color: #F6F9FF; + flex-direction: column; +} +.title-time-border-current{ + margin: 10rpx; + border: 3rpx dashed #4690FF; + width: calc(100% - 40rpx); + height: calc(100% - 40rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + background-color: #F6F9FF; + flex-direction: column; +} +.title-time-border-hisFaild{ + margin: 10rpx; + border: 2rpx dashed #FFE2E2; + width: calc(100% - 40rpx); + height: calc(100% - 40rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + background-color: #FFF8F8; + flex-direction: column; +} + +.title-time-border-yellow-active-transparent { + margin: 10rpx; + width: calc(100% - 40rpx); + height: calc(100% - 40rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + flex-direction: column; + opacity: 0.3; + background-color: rgba(255, 255, 255, 0.5); +} + +.title-time-border-yellow-active { + margin: 10rpx; + border: 1rpx solid #dae8fa; + width: calc(100% - 40rpx); + height: calc(100% - 40rpx); + border-radius: 20rpx; + display: flex; + align-items: center; + flex-direction: column; + animation: shakesmall 0.8s infinite; + background-color: rgba(255, 255, 255, 0.5); +} + +@keyframes shakesmall { + 0% { + transform: rotate(-2deg); + } + + 25% { + transform: rotate(2deg); + } + + 50% { + transform: rotate(-2deg); + } + + 75% { + transform: rotate(2deg); + } + + 100% { + transform: rotate(-2deg); + } +} + +.boom-father { + position: absolute; + top: 110rpx; + left: -17rpx; + width: 60rpx; + height: 1170rpx; + margin-top: 0rpx; + overflow: hidden; + z-index: 999; +} + +.boom { + height: 3000rpx; + display: flex; + flex-direction: column; + overflow: hidden; + z-index: 0; + + .boom-son { + height: 234rpx; + width: 60rpx; + font-size: 30rpx; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + z-index: 10; + font-size: 22rpx; + color: #A9ACB1; + + .boom-text { + width: 30rpx; + height: 50rpx; + border: 2rpx dashed #A9ACB1; + border-radius: 20rpx; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + background-color: #eff0f4; + } + } + + .boom-son-target { + height: 250rpx; + width: 60rpx; + font-size: 30rpx; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + z-index: 10; + font-weight: 700; + font-size: 25rpx; + color: #A9ACB1; + background: linear-gradient(to bottom, #ff8a00, #eceaff); + } +} + + +.left-top { + border-top-left-radius: 0 !important; +} + +.right-top { + border-top-right-radius: 0 !important; +} + +.left-bottom { + border-bottom-left-radius: 0 !important +} + +.right-bottom { + border-bottom-right-radius: 0 !important; +} + +.xian-bian { + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 999; + border-right: 1rpx solid transparent; + border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; +} + +.pulic-time { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #99C9FD; + font-size: 35rpx; + font-weight: 600; +} + +.right-order{ + position: fixed; + right: 20rpx; + top: 62rpx; + height: 1220rpx; + width: 430rpx; + background-color: #fff; + border-radius: 30rpx; + .order-title{ + width: 100%; + height: 100rpx; + display: flex; + align-items: center; + .order-month{ + margin-left: 30rpx; + font-size: 30rpx; + font-weight: 600; + width: 80rpx; + } + .order-day{ + width: 300rpx; + height: 100rpx; + .days-father{ + display: flex; + align-items: center; + .days{ + height: 100rpx; + min-width: 50rpx; + display: flex; + justify-content: center; + align-items: center; + font-size: 26rpx; + color: #BBBABA; + } + .targetdays{ + height: 50rpx; + min-width: 50rpx; + display: flex; + justify-content: center; + align-items: center; + font-size: 26rpx; + color: #fff; + border-radius: 50%; + background-color: #4690FF; + } + } + } + } +} \ No newline at end of file diff --git a/pages/NursingNew/component/nurse/bigindex.vue b/pages/NursingNew/component/nurse/bigindex.vue new file mode 100644 index 0000000..a0b313b --- /dev/null +++ b/pages/NursingNew/component/nurse/bigindex.vue @@ -0,0 +1,619 @@ + + + + + + \ No newline at end of file diff --git a/pages/NursingNew/component/nurse/index - 副本.vue b/pages/NursingNew/component/nurse/index - 副本.vue deleted file mode 100644 index abdd326..0000000 --- a/pages/NursingNew/component/nurse/index - 副本.vue +++ /dev/null @@ -1,1816 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/pages/NursingNew/component/nurse/index.css b/pages/NursingNew/component/nurse/index.css index 1921599..87da581 100644 --- a/pages/NursingNew/component/nurse/index.css +++ b/pages/NursingNew/component/nurse/index.css @@ -1,23 +1,560 @@ .super-card { display: flex; + /* justify-content: center; */ + width: 100%; + /* height: calc(100% - 400rpx); */ + + .scroll-x { + height: 100%; + width: 100%; + } + + .right-cards { + width: 550rpx; + height: 1280rpx; + + .scroll-box { + width: 100%; + height: 150rpx; + margin-top: 10rpx; + /* padding-right: 20rpx; */ + + .right-box { + height: 150rpx; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: flex-start; + /* padding-right: 10rpx; */ + + .right-box-item { + margin: 10rpx 10rpx 0 20rpx; + width: 250rpx; + height: 120rpx; + border-radius: 20rpx; + background-color: #fff; + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .right-box-img { + width: 60rpx; + height: 60rpx; + } + + .right-box-font { + font-size: 30rpx; + /* margin-top: 7rpx; */ + /* margin-left: 10rpx; */ + } + + .right-box-items { + display: flex; + justify-content: space-around; + align-items: center; + + .right-box-items-button { + width: 25rpx; + height: 25rpx; + margin: 0 3rpx; + } + } + } + + .title-time-button { + position: absolute; + top: 0rpx; + right: 0rpx; + width: 200rpx; + height: 100rpx; + /* background-color: red; */ + } + + .title-time-font { + position: absolute; + top: 5rpx; + right: 3rpx; + font-size: 17rpx; + color: #fff; + } + } + } + } + + .time-father { + border-radius: 20rpx; + height: 97%; + width: 95%; + margin-top: 6%; + margin-left: 6%; + background-color: rgba(255, 255, 255, 0.3); + + .time-button { + width: 140rpx; + height: 60rpx; + margin-top: 30rpx; + margin-left: 30rpx; + border-radius: 20rpx; + background-color: rgb(54, 159, 239); + border: 5rpx solid rgb(54, 159, 239); + display: flex; + + .time-button-month { + width: 50%; + height: 100%; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + } + + .time-button-month-target { + width: 50%; + height: 100%; + background-color: #fff; + color: rgb(54, 159, 239); + display: flex; + justify-content: center; + align-items: center; + border-bottom-left-radius: 15rpx; + border-top-left-radius: 15rpx; + } + + .time-button-week-target { + width: 50%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + } + + .time-button-week { + width: 50%; + height: 100%; + color: rgb(54, 159, 239); + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + border-bottom-right-radius: 15rpx; + border-top-right-radius: 15rpx; + } + } + } + + .under-button { + width: 520rpx; + height: 95rpx; + margin-left: 35rpx; + margin-top: 0rpx; + border-radius: 20rpx; + /* background-color: rgb(229, 233, 249); */ + display: flex; + align-items: center; + position: relative; + + .under-button-black { + transition: all 1s; + position: absolute; + width: 300rpx; + height: 100rpx; + border-radius: 20rpx; + padding-left: 10rpx; + background-color: rgb(77, 77, 77); + top: -100rpx; + left: 0rpx; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + + .under-button-three { + position: absolute; + right: 13rpx; + bottom: -17rpx; + /* 元素本身不占任何宽高 */ + width: 0; + height: 0; + + /* 左右边框透明，宽度各 50px */ + border-left: 15rpx solid transparent; + border-right: 15rpx solid transparent; + + /* 上边框实色（高度 100px），形成向下的“倒三角” */ + border-top: 20rpx solid rgb(77, 77, 77); + } + } + + .other-father { + width: 100%; + height: 100%; + background-color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .white-circle-click-father-spec { + position: absolute; + top: -160rpx; + right: 10rpx; + overflow: hidden; + /* background-color: #fff; */ + /* 重要：让伪元素在圆角内显示 */ + margin-left: 10rpx; + height: 130rpx; + width: 130rpx; + border-radius: 50%; + --color: #99C9FD; + --thick: 2px; + --radius: 50%; + border: var(--thick) dashed var(--color); + border-radius: var(--radius); + + background: + /* 上边 */ + repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / 100% var(--thick) no-repeat, + /* 下边 */ + repeating-linear-gradient(90deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) bottom left / 100% var(--thick) no-repeat, + /* 左边 */ + repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top left / var(--thick) 100% no-repeat, + /* 右边 */ + repeating-linear-gradient(0deg, var(--color) 0 var(--dash), transparent 0 calc(var(--dash) + var(--gap))) top right / var(--thick) 100% no-repeat; + + + } + + .white-circle-click-father { + position: relative; + overflow: hidden; + /* 重要：让伪元素在圆角内显示 */ + margin-left: 10rpx; + height: 75rpx; + width: 150rpx; + border-radius: 40rpx; + background: linear-gradient(to bottom, #e7f4ff, #c5e5ff); + border: 2rpx solid #9AD1FF; + color: #007CFF; + display: flex; + justify-content: center; + align-items: center; + -webkit-tap-highlight-color: transparent; + } + + /* 文本层级高于伪元素 */ + .white-circle-click-father .label { + position: relative; + z-index: 2; + } + + /* 伪元素作为点击时的覆盖渐变 */ + .white-circle-click-father::before { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + background: linear-gradient(to bottom, #bfe9ff, #4aa8ff); + /* 点击后的渐变（可替换） */ + opacity: 0; + /* transform: scale(1.02); */ + } + + /* anim 类触发 1s 动画（淡入→停留→淡出） */ + .white-circle-click-father.anim::before { + + animation: coverFade 1s ease-in-out forwards; + } + + + + /* keyframes：0-20% 淡入，20-80% 保持，80-100% 淡出 */ + @keyframes coverFade { + 0% { + opacity: 0; + } + + 20% { + opacity: 1; + } + + 80% { + opacity: 1; + } + + 100% { + opacity: 0; + } + } + + .white-circle { + width: 70rpx; + height: 70rpx; + border-radius: 50%; + margin-left: 15rpx; + background-color: #fff; + display: flex; + justify-content: center; + align-items: center; + z-index: 99; + + .white-circle-img { + width: 40rpx; + height: 40rpx; + } + } + } + + .middle-box { + width: 100%; + height: 840rpx; + /* background-color: red; */ + display: flex; + overflow: hidden; + + .middle-left-box { + margin-left: 0rpx; + width: 380rpx; + height: 800rpx; + /* background-color: red; */ + border-radius: 20rpx; + /* background-color: rgb(229, 233, 249); */ + display: flex; + + .first-contant { + height: 100%; + width: 190rpx; + + .right-box-item { + margin: 10rpx 0 0 20rpx; + width: 170rpx; + height: 120rpx; + border-radius: 20rpx; + background-color: rgba(255, 255, 255, 0.3); + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + white-space: nowrap; + /* 防止文本换行 */ + overflow: hidden; + /* 超出部分隐藏 */ + text-overflow: ellipsis; + /* 超出部分显示省略号 */ + + .right-box-img { + width: 60rpx; + height: 60rpx; + } + + .title-time-button { + position: absolute; + top: -4rpx; + right: -4rpx; + width: 70rpx; + height: 40rpx; + + } + + .title-time-button-font { + color: #1083f8; + position: absolute; + top: 2rpx; + right: 8rpx; + font-size: 19rpx; + z-index: 99; + } + + .right-box-font { + font-size: 23rpx; + /* margin-top: 10rpx; */ + } + + .title-time-zhejiao { + position: absolute; + top: 0rpx; + left: 5rpx; + width: 40rpx; + height: 40rpx; + } + + .title-time-font { + position: absolute; + top: 3rpx; + right: 5rpx; + font-size: 20rpx; + color: #fff; + z-index: 999; + } + + .right-box-items { + display: flex; + justify-content: space-around; + align-items: center; + + .right-box-items-button { + width: 25rpx; + height: 25rpx; + margin: 0 3rpx; + } + } + } + } + + .second-contant { + height: 100%; + width: 210rpx; + + .downList-box-target { + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + margin-left: 15rpx; + width: 160rpx; + height: 120rpx; + border-radius: 20rpx; + /* margin-left: 10rpx; */ + margin-top: 10rpx; + + flex-direction: column; + /* box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(54, 159, 239, 0.1); + border: 2rpx solid rgb(54, 159, 239); */ + white-space: nowrap; + /* 防止文本换行 */ + overflow: hidden; + /* 超出部分隐藏 */ + text-overflow: ellipsis; + /* 超出部分显示省略号 */ + + .downList-box-img { + height: 50rpx; + width: 50rpx; + } + + .downList-box-text { + font-size: 26rpx; + color: rgb(54, 159, 239); + } + } + + .downList-box { + display: flex; + justify-content: center; + align-items: center; + margin-left: 15rpx; + border-radius: 20rpx; + background-color: rgba(255, 255, 255, 0.5); + width: 160rpx; + height: 120rpx; + /* border-radius: 20rpx; */ + /* margin-left: 10rpx; */ + /* margin-bottom: 20rpx; */ + margin-top: 10rpx; + flex-direction: column; + white-space: nowrap; + /* 防止文本换行 */ + overflow: hidden; + /* 超出部分隐藏 */ + text-overflow: ellipsis; + /* 超出部分显示省略号 */ + /* box-shadow: 2rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.1); */ + + .downList-box-img { + height: 50rpx; + width: 50rpx; + } + + .downList-box-text { + font-size: 25rpx; + } + } + } + } + + .middle-right-box { + height: 780rpx; + width: 90rpx; + + /* overflow-y: hidden; */ + .doctorsay-container-card { + position: relative; + display: flex; + /* flex-direction: column; */ + justify-content: center; + align-items: center; + background-color: #fff; + width: 160rpx; + height: 100rpx; + /* margin: 0 0rpx 0rpx 0rpx; */ + border-radius: 50rpx; + /* border-radius: 20rpx; + border: 2rpx solid rgb(221, 234, 250); + box-shadow: 5px 5px 10px rgba(105, 129, 178, 0.2); */ + margin-left: 10rpx; + margin-top: 30rpx; + + /* 右下角阴影 */ + .doctorsay-container-card-img { + width: 55rpx; + height: 55rpx; + } + + .doctorsay-container-card-font { + font-size: 30rpx; + /* margin-top: 20rpx; */ + } + + } + + .doctorsay-container-card-target { + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: linear-gradient(to left, #fff, rgb(229, 233, 249)); + width: 115rpx; + height: 122rpx; + margin: 0 18rpx 10rpx 0rpx; + /* margin-left: -15rpx; */ + /* border: 2rpx solid #fff; */ + /* box-shadow: 5px 5px 10px rgba(105, 129, 178,0.2); */ + border-top-right-radius: 20rpx; + border-bottom-right-radius: 20rpx; + /* border-radius: 20rpx; */ + margin-left: -15rpx; + + /* 右下角阴影 */ + .doctorsay-container-card-img { + width: 55rpx; + height: 55rpx; + margin-left: 25rpx; + } + + + + } + + /* background-color: rgb(229,233,249); */ + } + } .super-card-container { background-blend-mode: screen; isolation: isolate; overflow: hidden; margin-left: 10rpx; - width: 1455rpx; + width: 1300rpx; + height: 1350rpx; border-left: 0; position: relative; - border-radius: 30rpx; - overflow: hidden; - border: 3rpx dashed #dde1e6; - } - - .super-card-right { - border-right: 1rpx solid transparent; - border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; } .super-card-time { @@ -25,24 +562,22 @@ justify-content: center; align-items: center; - height: 50rpx; - width: 289.3rpx; + height: 80rpx; + width: 259rpx; border-bottom: 1rpx solid transparent; border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; /* font-weight: 700; */ z-index: -1; font-size: 25rpx; color: #A9ACB1; - background-color: #EDF3FD; } .super-card-time-und { display: flex; justify-content: center; align-items: center; - width: 290rpx; + width: 259rpx; flex-direction: column; - border-right: 1rpx solid transparent; border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; @@ -53,23 +588,14 @@ } .title-time-font-rel { - font-size: 32rpx; - font-weight: 600; - /* margin-bottom: 5rpx; */ + font-size: 23rpx; + margin-bottom: 5rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - color: black; - } - .title-time-font-tags{ - font-size: 24rpx; - font-weight: 600; - /* margin-bottom: 5rpx; */ - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - color: #999; + color: #888888; } + .title-time-items { display: flex; justify-content: space-around; @@ -87,13 +613,12 @@ display: flex; justify-content: center; align-items: center; - height: 234rpx; - width: 100%; + height: 200rpx; + width: calc(100%); transition: all 0.8s; border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; - } } @@ -102,7 +627,6 @@ height: 100vh; transition: opacity 1s ease; position: relative; - margin-left: -50rpx; .joystick { position: absolute; @@ -136,13 +660,97 @@ width: 100%; height: 1350rpx; display: flex; - margin-top: 62rpx; + /* background-color: red; */ + /* margin-top: 10rpx; */ .doctorsay-container-container { width: 100%; overflow: hidden; + + .doctorsay-container-title { + width: 100%; + height: 105rpx; + display: flex; + align-items: center; + justify-content: space-between; + + .doctorsay-container-left { + display: flex; + } + } + } } + + .right-container-title-nav { + /* margin-top: 75rpx; */ + margin-bottom: 20rpx; + /* margin-left: 20rpx; */ + + .right-icons { + display: flex; + align-items: center; + float: right; + height: 70rpx; + margin-right: 40rpx; + + .right-icons-font { + margin-left: 10rpx; + margin-right: 10rpx; + font-size: 35rpx; + margin-top: -30rpx; + } + + .right-icons-img { + width: 80rpx; + height: 80rpx; + margin-left: 10rpx; + margin-right: 10rpx; + margin-top: -40rpx; + + } + + .right-icons-img-icon { + width: 60rpx; + height: 80rpx; + margin-top: -10rpx; + margin-left: 8rpx; + } + } + + .right-container-title-class { + font-size: 35rpx; + font-weight: 800; + margin-left: 20rpx; + } + + .right-container-title-class-dark { + font-size: 35rpx; + font-weight: 800; + margin-left: 20rpx; + background: linear-gradient(to bottom, #FFFFFF, #B2C8E2); + -webkit-background-clip: text; + color: transparent; + } + } +} + +.title-time-delete { + width: 55rpx; + height: 55rpx; + border-radius: 50%; + display: flex; + background-color: #fff; + justify-content: center; + align-items: center; + position: absolute; + top: 0rpx; + right: 0rpx; + z-index: 10; + background-color: #02abfe; + color: #fff; + z-index: 999; + font-size: 50rpx; } .title-time-blue { @@ -179,24 +787,30 @@ position: absolute; width: 280rpx; height: 100rpx; + /* padding-left: 10rpx; */ padding: 0 20rpx; border-radius: 20rpx; border-top-right-radius: 0rpx; border: 2rpx solid #e8e9eb; + /* background-color: #55555555; */ background-color: #fff; color: #545569; bottom: -100rpx; left: -130rpx; + /* color: #fff; */ display: flex; justify-content: center; align-items: center; z-index: 999; + /* box-shadow: 0 2px 6px #6981b2 ; */ + } .time-button-orange { transition: all 1s; position: absolute; + width: 280rpx; height: 100rpx; border-radius: 20rpx; @@ -218,20 +832,13 @@ display: flex; width: 100%; position: relative; - height: 100%; - padding: 20rpx; - - .card-time{ - position: absolute; - bottom: 20rpx; - left: 20rpx; - font-size: 25rpx; - } .title-time-time { font-size: 32rpx; margin: 0 auto; font-weight: 600; + /* margin-left: 10rpx; */ + /* margin-top: 12rpx; */ } .title-time-button { @@ -242,6 +849,14 @@ height: 40rpx; } + .title-time-zhejiao { + position: absolute; + top: 0rpx; + left: 5rpx; + width: 40rpx; + height: 40rpx; + } + .title-time-font { position: absolute; top: 0rpx; @@ -251,28 +866,457 @@ } } +.popup-say { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + backdrop-filter: blur(1rpx); + background-color: rgba(236, 237, 241, 0.4); + /* 添加毛玻璃效果 */ + z-index: 999; + + .popup-say-content { + position: absolute; + right: 65rpx; + bottom: 170rpx; + display: flex; + flex-direction: column; + width: 450rpx; + /* height: 800rpx; */ + background-color: #fff; + border: 2rpx solid #fff; + border-radius: 30rpx; + box-shadow: 10rpx 10rpx 20rpx rgba(0, 0, 0, 0.1); + transition: opacity 0.4s ease; + + + + .popup-say-content-flex { + display: flex; + margin-top: 7rpx; + margin-bottom: 10rpx; + + .popup-say-content-gun { + margin-left: 40rpx; + margin-right: 20rpx; + width: 13rpx; + height: 35rpx; + background: linear-gradient(to bottom, #04BCED, #0160CE); + border-radius: 10rpx; + } + + .popup-say-content-font { + font-size: 30rpx; + font-weight: 700; + } + } + + + .popup-say-three { + position: absolute; + left: 173rpx; + bottom: -39rpx; + /* 元素本身不占任何宽高 */ + width: 0; + height: 0; + + /* 左右边框透明，宽度各 50px */ + border-left: 30rpx solid transparent; + border-right: 30rpx solid transparent; + + /* 上边框实色（高度 100px），形成向下的“倒三角” */ + border-top: 40rpx solid #fff; + } + } +} + + + +.popup-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + /* 添加毛玻璃效果 */ + z-index: 999; + + .popup-overlay-content { + position: absolute; + display: flex; + // justify-content: center; + align-items: center; + width: 800rpx; + + background-color: #fff; + border-radius: 30rpx; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + transition: opacity 0.4s ease; + overflow: hidden; + + .popup-overlay-content-left { + // background-color: red; + height: 100%; + width: 350rpx; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .popup-overlay-content-left-img { + width: 280rpx; + height: 240rpx; + margin-top: 0rpx; + } + + .popup-overlay-content-left-font { + // margin-top: 20rpx; + font-size: 30rpx; + } + } + + .popup-overlay-content-right { + height: 100%; + width: 450rpx; + position: relative; + + .time-font { + font-size: 60rpx; + margin-top: 80rpx; + margin-bottom: 10rpx; + font-weight: 700; + background: linear-gradient(to bottom, #7080A1, #263556); + -webkit-background-clip: text; + color: transparent; + } + + .time-text { + margin-left: 10rpx; + font-size: 32rpx; + // font-weight: 700; + width: 400rpx; + margin-bottom: 50rpx; + line-height: 35rpx; + + } + + .right-richang { + background-color: #FFC363; + position: absolute; + top: 108rpx; + right: 50rpx; + padding: 5rpx; + border-radius: 10rpx; + } + + .right-richangnot { + background-color: #7B61FF; + position: absolute; + top: 108rpx; + right: 50rpx; + padding: 5rpx; + border-radius: 10rpx; + color: #fff; + } + + .right-crush { + position: absolute; + top: 20rpx; + right: 20rpx; + width: 70rpx; + height: 70rpx; + animation: shake 0.5s 3; + } + } + } +} + +.ri-img { + position: absolute; + top: -4rpx; + right: -4rpx; + width: 60rpx; + height: 60rpx; +} + +.time-father { + display: flex; + width: 100%; + flex-wrap: wrap; + margin-left: 30rpx; + margin-right: 30rpx; + + .time-one { + width: 100rpx; + height: 100rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background-color: rgb(241, 245, 252); + border-radius: 20rpx; + border: 1rpx solid rgb(109, 131, 179); + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + box-shadow: 5rpx 5rpx 10rpx rgba(105, 129, 178, 0.4) + } + + .time-one-target { + width: 100rpx; + height: 100rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background: linear-gradient(to right, #00c9ff, #0076ff); + color: #fff; + border-radius: 20rpx; + border: 1rpx solid #fff; + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + box-shadow: 5rpx 5rpx 10rpx rgba(105, 129, 178, 0.4) + } + + .time-one-hui { + width: 100rpx; + height: 100rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background-color: #c2c9d3; + // color: #fff; + border-radius: 20rpx; + border: 1rpx solid #fff; + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + box-shadow: 5rpx 5rpx 10rpx rgba(105, 129, 178, 0.4) + } +} + +.items-card { + width: 100%; + height: 80rpx; + display: flex; + justify-content: center; + align-items: center; +} + +.items-card-target { + width: 100%; + height: 80rpx; + display: flex; + justify-content: center; + align-items: center; + color: rgb(54, 159, 239); + background: linear-gradient(to right, + rgba(54, 159, 239, 0) 0%, + rgba(54, 159, 239, 0.5) 50%, + rgba(54, 159, 239, 0) 100%); +} + +.button-father { + height: 200rpx; + width: calc(100% - 80rpx); + display: flex; + justify-content: center; + align-items: center; + margin-left: 40rpx; + margin-right: 40rpx; + margin-top: 20rpx; + border-top: 1rpx solid rgb(230, 230, 230); + + .button-father-right { + background: linear-gradient(to right, #00c9ff, #0076ff); + width: 200rpx; + height: 80rpx; + border-radius: 40rpx; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + + } + + .button-father-wrong { + background-color: #c2c9d3; + width: 200rpx; + height: 80rpx; + border-radius: 40rpx; + display: flex; + justify-content: center; + align-items: center; + + } +} + +.month-father { + display: flex; + width: calc(100% - 60rpx); + flex-wrap: wrap; + margin-left: 30rpx; + margin-right: 30rpx; + margin-top: 20rpx; + margin-bottom: 30rpx; + + .month-one { + width: 75rpx; + height: 75rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background-color: rgb(241, 245, 252); + border-radius: 20rpx; + border: 1rpx solid rgb(109, 131, 179); + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + } + + .month-one-target { + width: 75rpx; + height: 75rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background: linear-gradient(to right, #00c9ff, #0076ff); + color: #fff; + border-radius: 20rpx; + border: 1rpx solid #fff; + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + } +} + +.week-father { + display: flex; + width: 100%; + flex-wrap: wrap; + margin-left: 30rpx; + margin-right: 30rpx; + margin-top: 20rpx; + margin-bottom: 30rpx; + + .week-one { + width: 200rpx; + height: 100rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background-color: rgb(241, 245, 252); + border-radius: 20rpx; + border: 1rpx solid rgb(109, 131, 179); + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + } + + .week-one-target { + width: 200rpx; + height: 100rpx; + margin-left: 20rpx; + margin-top: 20rpx; + background: linear-gradient(to right, #00c9ff, #0076ff); + color: #fff; + border-radius: 20rpx; + border: 1rpx solid #fff; + display: flex; + justify-content: center; + align-items: center; + font-size: 29rpx; + } +} + +.radio-father { + display: flex; + width: 100%; + flex-wrap: wrap; + margin-left: 75rpx; + margin-right: 30rpx; + /* margin-bottom: 30rpx; */ + + .radio-circle { + margin-top: 2rpx; + width: 30rpx; + height: 30rpx; + border-radius: 50%; + border: 2rpx solid black; + background-color: transparent; + } + + .radio-circle-target { + position: relative; + margin-top: 2rpx; + width: 30rpx; + height: 30rpx; + border-radius: 50%; + border: 2rpx solid rgb(2, 171, 254); + background-color: transparent; + } + + .radio-circle-target::after { + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 20rpx; + height: 20rpx; + background-color: rgb(2, 171, 254); + border-radius: 50%; + } + + .radio-font { + margin-left: 15rpx; + margin-right: 60rpx; + font-size: 29rpx; + } + + .radio-font-target { + color: rgb(2, 171, 254); + ; + margin-left: 15rpx; + margin-right: 60rpx; + font-size: 29rpx; + } +} + .title-time-border { margin-top: 4rpx; margin-left: 4rpx; + // border: 1rpx solid black; width: calc(100% - 8rpx); height: calc(100% - 8rpx); border-radius: 20rpx; display: flex; + // justify-content: center; align-items: center; flex-direction: column; } + .title-time-border-big { transform: scale(1.3); transform-origin: top; + /* 将页面内容放大1.2倍 */ border-top: 0rpx solid #fff; transition: transform 0.5s ease-out, opacity 0.5s ease-out; z-index: 999; display: flex; justify-content: center; align-items: center; - height: 226rpx; - width: 100%; + height: 200rpx; + width: calc(100%); border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; @@ -281,14 +1325,15 @@ .title-time-border-big-top { transform: scale(1.3); transform-origin: top; + /* 将页面内容放大1.2倍 */ border-top: 0rpx solid #fff; transition: transform 0.5s ease-out, opacity 0.5s ease-out; z-index: 999; display: flex; justify-content: center; align-items: center; - height: 226rpx; - width: 100%; + height: 200rpx; + width: calc(100%); border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; flex-direction: column; position: relative; @@ -296,52 +1341,22 @@ .title-time-border-yellow { margin: 10rpx; - border: 2rpx solid #e5e6e6; + border: 2rpx solid transparent; + /* background: linear-gradient(to bottom, #fff1db, #ffe2b2); */ width: calc(100% - 40rpx); height: calc(100% - 40rpx); border-radius: 20rpx; display: flex; align-items: center; - background-color: #f2f3f8; - flex-direction: column; - -} -.title-time-border-hisOk{ - margin: 10rpx; - border: 2rpx solid #D4E4FE; - width: calc(100% - 40rpx); - height: calc(100% - 40rpx); - border-radius: 20rpx; - display: flex; - align-items: center; - background-color: #F6F9FF; - flex-direction: column; -} -.title-time-border-current{ - margin: 10rpx; - border: 2rpx dashed #4690FF; - width: calc(100% - 40rpx); - height: calc(100% - 40rpx); - border-radius: 20rpx; - display: flex; - align-items: center; - background-color: #F6F9FF; - flex-direction: column; -} -.title-time-border-hisFaild{ - margin: 10rpx; - border: 2rpx dashed #FFE2E2; - width: calc(100% - 40rpx); - height: calc(100% - 40rpx); - border-radius: 20rpx; - display: flex; - align-items: center; - background-color: #FFF8F8; + background-color: rgba(255, 255, 255, 0.5); flex-direction: column; + /* box-shadow: 8rpx 8rpx 16rpx rgba(255, 138, 0, 0.7); */ } .title-time-border-yellow-active-transparent { margin: 10rpx; + /* border: 4rpx dashed rgb(255, 138, 0); */ + /* background: linear-gradient(to bottom, #fff1db, #ffe2b2); */ width: calc(100% - 40rpx); height: calc(100% - 40rpx); border-radius: 20rpx; @@ -350,11 +1365,13 @@ flex-direction: column; opacity: 0.3; background-color: rgba(255, 255, 255, 0.5); + /* box-shadow: 8rpx 8rpx 16rpx rgba(255, 138, 0, 0.7); */ } .title-time-border-yellow-active { margin: 10rpx; border: 1rpx solid #dae8fa; + /* background: linear-gradient(to bottom, #fff1db, #ffe2b2); */ width: calc(100% - 40rpx); height: calc(100% - 40rpx); border-radius: 20rpx; @@ -365,6 +1382,84 @@ background-color: rgba(255, 255, 255, 0.5); } +.down-icons { + margin-top: 17rpx; + width: 100%; + height: 60rpx; + background-color: rgb(255, 216, 126); + display: flex; + justify-content: center; + align-items: center; + + .icon { + margin: 0 5rpx; + font-size: 20rpx; + padding: 5rpx 10rpx; + background-color: rgb(255, 138, 0); + color: #fff; + border-radius: 5rpx; + } +} + +.super-end-items-img-father { + /* width: 60rpx; */ + /* height: 60rpx; */ + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-direction: column; +} + +.super-end-items-img-father-active { + text-align: center; + /* height: 60rpx; */ + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + animation: shake 0.5s infinite; +} + +@keyframes shake { + 0% { + transform: rotate(-10deg); + } + + 25% { + transform: rotate(10deg); + } + + 50% { + transform: rotate(-10deg); + } + + 75% { + transform: rotate(10deg); + } + + 100% { + transform: rotate(-10deg); + } +} + +.super-end-items-father-close-father { + width: 40rpx; + height: 40rpx; + border-radius: 50%; + display: flex; + background-color: #0184db; + justify-content: center; + align-items: center; + position: absolute; + top: 0rpx; + right: 0rpx; + z-index: 10; + color: #fff; +} + @keyframes shakesmall { 0% { transform: rotate(-2deg); @@ -387,26 +1482,43 @@ } } + + .boom-father { position: absolute; - top: 110rpx; + top: 220rpx; left: -17rpx; width: 60rpx; - height: 1170rpx; - margin-top: 0rpx; + height: 1000rpx; + margin-top: 10rpx; + /* background-color: red; */ overflow: hidden; z-index: 999; + /* background: linear-gradient(to bottom, #c4dbf4, #c9c2ef, #c6dcf3); */ + /* border-bottom: 2rpx solid #fff; */ + /* border-left: 2rpx solid #fff; */ + /* border-bottom-left-radius: 20rpx; */ +} + +.doctorsay-container-card-font-dark { + font-size: 31rpx; + color: rgb(54, 159, 239); + /* margin-left: 25rpx; */ + /* margin-top: 20rpx; */ } .boom { - height: 3000rpx; + height: 2500rpx; display: flex; flex-direction: column; + /* // justify-content: center; */ + /* align-items: center; */ overflow: hidden; z-index: 0; + .boom-son { - height: 234rpx; + height: 200rpx; width: 60rpx; font-size: 30rpx; display: flex; @@ -414,20 +1526,28 @@ align-items: center; text-align: center; z-index: 10; - font-size: 22rpx; + font-size: 25rpx; color: #A9ACB1; .boom-text { - width: 30rpx; - height: 50rpx; - border: 2rpx dashed #A9ACB1; - border-radius: 20rpx; + /* padding: 5rpx; */ + width: 40rpx; + height: 40rpx; + border: 1rpx solid #A9ACB1; + border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 1; background-color: #eff0f4; } + + /* border: 1rpx solid #A9ACB1; + border-radius: 50%; */ + /* font-weight: 700; */ + /* border-top: 1rpx solid transparent; */ + /* border-right: 1rpx solid transparent; */ + /* border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; */ } .boom-son-target { @@ -442,94 +1562,487 @@ font-weight: 700; font-size: 25rpx; color: #A9ACB1; + + /* border-top: 1rpx solid transparent; + border-bottom: 1rpx solid transparent; */ + /* border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 6rpx, transparent 6rpx, transparent 12rpx) 1; */ + /* 确保文字在容器内居中 */ background: linear-gradient(to bottom, #ff8a00, #eceaff); + /* border-bottom-right-radius: 40rpx; + border-top-right-radius: 40rpx; */ } } - -.left-top { - border-top-left-radius: 0 !important; -} - -.right-top { - border-top-right-radius: 0 !important; -} - -.left-bottom { - border-bottom-left-radius: 0 !important -} - -.right-bottom { - border-bottom-right-radius: 0 !important; -} - -.xian-bian { - height: 100%; - position: absolute; +.popup-share { + position: fixed; top: 0; left: 0; - z-index: 999; - border-right: 1rpx solid transparent; - border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; -} - -.pulic-time { - width: 100%; - height: 100%; + right: 0; + bottom: 0; display: flex; justify-content: center; align-items: center; - color: #99C9FD; - font-size: 35rpx; + backdrop-filter: blur(1rpx); + background-color: rgba(236, 237, 241, 0.4); + /* 添加毛玻璃效果 */ + z-index: 999; + + + .share-other { + z-index: 1; + width: 100%; + height: 100%; + } + + .share-title { + padding-left: 50rpx; + height: 150rpx; + display: flex; + align-items: center; + } + + .share-others { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + .other-img { + width: 150rpx; + height: 150rpx; + margin-left: 100rpx; + } + } + + .popup-share-content { + position: absolute; + display: flex; + flex-direction: column; + width: 800rpx; + height: 450rpx; + background-color: #fff; + border-radius: 30rpx; + transition: opacity 0.4s ease; + + .popup-share-title { + margin: 30rpx 30rpx; + font-size: 40rpx; + position: relative; + + .popup-share-img { + position: absolute; + top: 0; + right: 0; + width: 200rpx; + height: 200rpx; + } + } + + .popup-share-upcontent { + margin: 0 30rpx; + display: flex; + justify-content: space-between; + + .popup-share-font { + font-size: 35rpx; + color: gray; + } + + } + + .popup-share-gray { + background-color: #D3D3D3; + width: calc(100% - 60rpx); + height: 2rpx; + margin: 110rpx 30rpx 0 30rpx; + } + + .popup-share-downcontent { + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + margin: 0 30rpx; + + .popup-downcontent-img { + width: 70rpx; + height: 70rpx; + } + + .popup-downcontent-font { + font-size: 27rpx; + margin-left: 20rpx; + } + + .popup-share-downcontent-left { + display: flex; + align-items: center; + } + + .popup-share-downcontent-button { + background: linear-gradient(to right bottom, #00c9ff, #0076ff); + color: #fff; + display: flex; + justify-content: center; + align-items: center; + padding: 15rpx 30rpx; + border-radius: 20rpx; + font-size: 32rpx; + } + } + + } + +} + +.tags-father { + display: flex; + flex-direction: column; + justify-content: center; + /* margin-left: 23rpx; */ + margin: 10rpx 14rpx; + margin-left: 30rpx; + /* margin-top: 15rpx; */ + align-items: center; + width: 100rpx; + height: 110rpx; + + + .tags-font { + font-size: 25rpx; + } +} + +.tags-img { + width: 50rpx; + height: 50rpx; + margin-bottom: 10rpx; +} + +.specia-onshow { + background-color: rgb(241, 245, 252); + width: 100%; + height: 100%; + padding: 20rpx; + + .specia-title { + width: 100%; + height: 100rpx; + font-size: 40rpx; + font-weight: 600; + display: flex; + justify-content: center; + align-items: center; + } + + .specia-cards { + width: 100%; + display: flex; + flex-wrap: wrap; + } +} + +/* 容器默认隐藏，透明度为 0，不接受点击 */ +.neuro-wrapper { + position: fixed; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 999; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; +} + +/* 显示时透明度过渡到 1，可接受点击 */ +.neuro-wrapper.is-active { + opacity: 1; + pointer-events: auto; +} + +/* 遮罩层，半透明黑色 */ +.neuro-mask { + position: absolute; + inset: 0; + background-color: rgba(0, 0, 0, 0.3); +} + +/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */ +.neuro-box { + position: relative; + width: 600rpx; + height: 450rpx; + border-radius: 30rpx; + background-color: #fff; + display: flex; + flex-direction: column; + align-items: center; + z-index: 1; + padding: 0 5%; +} + +.button { + width: 47%; + background-color: #ddf0ff; + display: flex; + justify-content: center; + align-items: center; + color: #007CFF; + border: 1rpx solid #007CFF; + font-size: 25rpx; + border-radius: 30rpx; +} + +.title { + margin-top: 70rpx; + font-size: 33rpx; font-weight: 600; } -.right-order{ - position: fixed; - right: 20rpx; - top: 62rpx; - height: 1220rpx; - width: 430rpx; - background-color: #fff; +.card-font { + margin-top: 70rpx; + width: 600rpx; + justify-content: center; + display: flex; +} + +.button-white { + width: 47%; + border: 2rpx solid #c3cacd; + background: linear-gradient(to bottom, #f3f3f5, #dee4e9); + display: flex; + justify-content: center; + align-items: center; + font-size: 25rpx; border-radius: 30rpx; - .order-title{ - width: 100%; - height: 100rpx; +} + +.delete-button-father { + position: absolute; + bottom: 60rpx; + left: 50%; + transform: translateX(-50%); + width: 100%; + height: 70rpx; + display: flex; + justify-content: space-between; + padding: 0 50rpx; +} + + .right-container-title-nav { + margin-top: 60rpx; display: flex; align-items: center; - .order-month{ + height: 60rpx; + position: relative; + font-size: 28rpx; + + .new-weight { margin-left: 30rpx; - font-size: 30rpx; font-weight: 600; - width: 80rpx; } - .order-day{ - width: 300rpx; - height: 100rpx; - .days-father{ - display: flex; - align-items: center; - .days{ - height: 100rpx; - min-width: 50rpx; - display: flex; - justify-content: center; - align-items: center; - font-size: 26rpx; - color: #BBBABA; - } - .targetdays{ - height: 50rpx; - min-width: 50rpx; - display: flex; - justify-content: center; - align-items: center; - font-size: 26rpx; - color: #fff; - border-radius: 50%; - background-color: #4690FF; - } + + .right-icons { + position: absolute; + right: 0; + top: 0; + display: flex; + align-items: center; + margin-top: -5rpx; + } + } + + .white-button { + width: 160rpx; + height: 70rpx; + border-radius: 40rpx; + background-color: #E6E7EB; + margin-left: 20rpx; + margin-top: 10rpx; + display: flex; + justify-content: center; + align-items: center; + + .white-img { + width: 35rpx; + height: 35rpx; + margin-right: 10rpx; + } + } + + .left-top { + border-top-left-radius: 0 !important; + } + + .right-top { + border-top-right-radius: 0 !important; + } + + .left-bottom { + border-bottom-left-radius: 0 !important + } + + .right-bottom { + border-bottom-right-radius: 0 !important; + } + + .mark { + font-size: 29rpx; + position: relative; + } + + .marknone { + font-size: 29rpx; + color: #999; + display: flex; + margin-top: 5rpx; + } + + .tri-down { + width: 0; + height: 0; + border-left: 10rpx solid transparent; + /* s/2 */ + border-right: 10rpx solid transparent; + /* s/2 */ + border-top: 17.32rpx solid #999; + /* 0.866 * s */ + margin: 0rpx 0rpx 0 15rpx; + position: relative; + } + + .mark-bgc { + position: absolute; + top: 20rpx; + right: 0; + width: 450rpx; + background-color: #fff; + z-index: 999; + border-radius: 30rpx; + padding-bottom: 30rpx; + transition: opacity 0.3s ease; + } + + .blue-button { + margin-top: 60rpx; + width: 150rpx; + height: 70rpx; + border-radius: 40rpx; + display: flex; + justify-content: center; + align-items: center; + color: #007CFF; + font-size: 30rpx; + background: linear-gradient(to bottom, #e7f4ff, #c5e5ff); + border: 2rpx solid #9AD1FF; + } + + .firsttarget { + --color: #99C9FD; + --thick: 2px; + --radius: 50rpx; + --outline-offset: 10rpx; + /* 外扩多少 */ + /* 内层虚线（你现在用的） */ + border-radius: var(--radius); + /* 内部背景 */ + animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1); + /* 外层虚线：放在 outline（不会影响元素尺寸） */ + outline: var(--thick) dashed var(--color); + outline-offset: var(--outline-offset); + /* 保证文本 / 子元素在最上层 */ + position: relative; + z-index: 999; + } + + .secondtarget { + --color: #99C9FD; + --thick: 2px; + --radius: 10rpx; + --outline-offset: 0rpx; + /* 外扩多少 */ + /* 内层虚线（你现在用的） */ + border-radius: var(--radius); + /* 内部背景 */ + animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1); + /* 外层虚线：放在 outline（不会影响元素尺寸） */ + outline: var(--thick) dashed var(--color); + outline-offset: var(--outline-offset); + /* 保证文本 / 子元素在最上层 */ + position: relative; + z-index: 999; + } + + .xian-bian { + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: 999; + border-right: 1rpx solid transparent; + border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1; + } + + .pulic-time { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + color: #99C9FD; + font-size: 35rpx; + font-weight: 600; + } + + .zhiling-card { + width: calc(100% - 20rpx); + height: 200rpx; + background-color: rgba(255, 255, 255, 0.3); + margin-left: 20rpx; + border-radius: 30rpx; + border: 2rpx solid rgb(229, 233, 249); + position: relative; + margin-bottom: 10rpx; + padding: 20rpx 30rpx; + overflow: hidden; + + .zhiling-card-button { + position: absolute; + top: 0rpx; + right: 0rpx; + width: 120rpx; + height: 50rpx; + } + + .zhiling-card-font { + position: absolute; + top: 5rpx; + right: 20rpx; + /* width: 100rpx; */ + /* height: 40rpx; */ + display: flex; + justify-content: center; + align-items: center; + color: #1083f8; + font-size: 22rpx; + } + + .bag { + display: flex; + flex-wrap: wrap; + margin-top: 20rpx; + + .bag-one { + // margin-right: 10rpx; } } } -} \ No newline at end of file + + .overlay { + position: fixed; + inset: 0; + background-color: rgba(236, 237, 241, 0.4); + /* 半透明黑色 */ + z-index: 999; + } \ No newline at end of file diff --git a/pages/NursingNew/component/nurse/index.vue b/pages/NursingNew/component/nurse/index.vue index d96a4de..abdd326 100644 --- a/pages/NursingNew/component/nurse/index.vue +++ b/pages/NursingNew/component/nurse/index.vue @@ -1,16 +1,134 @@