2290 lines
39 KiB
CSS
2290 lines
39 KiB
CSS
.super-card {
|
||
display: flex;
|
||
width: 100%;
|
||
|
||
.super-card-container {
|
||
background-blend-mode: screen;
|
||
isolation: isolate;
|
||
overflow: hidden;
|
||
margin-left: 10rpx;
|
||
width: 1300rpx;
|
||
border-left: 0;
|
||
position: relative;
|
||
border-radius: 30rpx;
|
||
overflow: hidden;
|
||
border: 3rpx dashed #dde1e6;
|
||
}
|
||
|
||
.super-card-time {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
height: 50rpx;
|
||
width: 258.3rpx;
|
||
border-bottom: 1rpx solid transparent;
|
||
border-image: repeating-linear-gradient(90deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||
z-index: -1;
|
||
font-size: 27rpx;
|
||
color: #9b9ea2;
|
||
background-color: #EDF3FD;
|
||
}
|
||
|
||
.super-card-time-und {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
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;
|
||
|
||
.title-time-img {
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
margin-top: -5rpx;
|
||
}
|
||
|
||
.title-time-font-rel {
|
||
margin-top: 9rpx;
|
||
font-size: 33rpx;
|
||
font-weight: 800;
|
||
/* 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: 245rpx;
|
||
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;
|
||
}
|
||
|
||
.title-time-border-big {
|
||
transform: scale(1.3);
|
||
transform-origin: top;
|
||
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
|
||
z-index: 999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 245rpx;
|
||
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;
|
||
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
|
||
z-index: 999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 245rpx;
|
||
width: 100%;
|
||
border-image: repeating-linear-gradient(90deg, #0184db 0px, #0184db 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: 30rpx;
|
||
|
||
|
||
.doctorsay-container-container {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
}
|
||
}
|
||
.title-time-blue {
|
||
/* 你的定位与尺寸保持不变 */
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 100%;
|
||
height: 103%;
|
||
z-index: 10;
|
||
|
||
.blue-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.title-time {
|
||
display: flex;
|
||
width: 100%;
|
||
position: relative;
|
||
.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-zhejiao {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 5rpx;
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.title-time-font {
|
||
position: absolute;
|
||
top: 0rpx;
|
||
right: 4rpx;
|
||
font-size: 20rpx;
|
||
color: #1083f8;
|
||
}
|
||
}
|
||
|
||
.title-time-border-yellow {
|
||
margin: 10rpx;
|
||
border: 2rpx solid transparent;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: rgba(255, 255, 255, 0.5);
|
||
flex-direction: column;
|
||
font-size: 30rpx;
|
||
overflow: hidden;
|
||
width: 240rpx;
|
||
height: 170rpx;
|
||
|
||
.kill-icon {
|
||
margin-top: 10rpx;
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
/* 性能关键 */
|
||
will-change: transform;
|
||
transform-origin: 50% 52%;
|
||
}
|
||
|
||
.kill-text {
|
||
white-space: nowrap;
|
||
color: #818181;
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
.boom-father {
|
||
position: absolute;
|
||
top: 87rpx;
|
||
left: -17rpx;
|
||
width: 60rpx;
|
||
height: 1225rpx;
|
||
margin-top: 0rpx;
|
||
overflow: hidden;
|
||
z-index: 9;
|
||
}
|
||
|
||
.boom {
|
||
height: 3000rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
z-index: 0;
|
||
|
||
.boom-son {
|
||
height: 245rpx;
|
||
width: 60rpx;
|
||
font-size: 25rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
z-index: 9;
|
||
|
||
.boom-text {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
font-size: 22rpx;
|
||
color: #0091ff;
|
||
border: 2rpx solid #DFDFE0;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* z-index: 1; */
|
||
background-color: #eff0f4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-share {
|
||
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;
|
||
|
||
|
||
.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-father {
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
display: flex;
|
||
|
||
.tags-img-view {
|
||
width: 50%;
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
|
||
.tags-img {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 容器默认隐藏，透明度为 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: 550rpx;
|
||
border-radius: 30rpx;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
z-index: 1;
|
||
padding: 0 5%;
|
||
}
|
||
|
||
.title {
|
||
margin-top: 70rpx;
|
||
font-size: 33rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.card-font {
|
||
margin-top: 70rpx;
|
||
width: 600rpx;
|
||
justify-content: center;
|
||
display: flex;
|
||
}
|
||
|
||
.button-white {
|
||
width: 30%;
|
||
border: 2rpx solid #c3cacd;
|
||
background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 30rpx;
|
||
border-radius: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.button {
|
||
width: 30%;
|
||
background-color: #ddf0ff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #007CFF;
|
||
border: 1rpx solid #007CFF;
|
||
font-size: 30rpx;
|
||
border-radius: 30rpx;
|
||
}
|
||
|
||
.delete-button-father {
|
||
position: absolute;
|
||
bottom: 60rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 100%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
|
||
.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;
|
||
}
|
||
|
||
.super-card-right {
|
||
border-right: 1rpx solid transparent;
|
||
border-image: repeating-linear-gradient(180deg, #A9ACB1 0px, #A9ACB1 6rpx, transparent 6rpx, transparent 12rpx) 1;
|
||
}
|
||
|
||
.right-order {
|
||
position: fixed;
|
||
right: 20rpx;
|
||
top: 30rpx;
|
||
height: 1278rpx;
|
||
width: 600rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.right-tags {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 220rpx;
|
||
border-radius: 35rpx;
|
||
position: relative;
|
||
|
||
.setting-open {
|
||
position: absolute;
|
||
top: 80rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 900rpx;
|
||
background-color: #fff;
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 35rpx;
|
||
z-index: 1;
|
||
|
||
.setting-right {
|
||
position: absolute;
|
||
right: 25rpx;
|
||
bottom: 35rpx;
|
||
width: 120rpx;
|
||
height: 60rpx;
|
||
font-size: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #0080FC;
|
||
border: 2rpx solid #0080FC;
|
||
border-radius: 10rpx;
|
||
background-color: #F5FAFF;
|
||
}
|
||
|
||
.setting-list {
|
||
width: 100%;
|
||
height: 620rpx;
|
||
margin-top: 10rpx;
|
||
|
||
.list-items {
|
||
min-height: 124rpx;
|
||
height: 124rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.check-box {
|
||
margin-left: 52rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 2rpx solid #d5d5d5;
|
||
border-radius: 12rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-size: 15rpx;
|
||
font-weight: 800;
|
||
color: #d5d5d5;
|
||
}
|
||
|
||
.check-box-target {
|
||
margin-left: 52rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 2rpx solid #0080FC;
|
||
border-radius: 12rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-size: 15rpx;
|
||
font-weight: 800;
|
||
color: #0080FC;
|
||
}
|
||
|
||
.check-img {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
margin: 0 22rpx;
|
||
}
|
||
|
||
.check-text-view {
|
||
width: 400rpx;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
.check-weight {
|
||
font-weight: 800;
|
||
font-size: 29rpx;
|
||
}
|
||
|
||
.check-text {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.setting-menu {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 25rpx;
|
||
position: relative;
|
||
|
||
.menu-tags {
|
||
width: 155rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.menu-heng {
|
||
position: absolute;
|
||
bottom: 23rpx;
|
||
left: 70rpx;
|
||
width: 20rpx;
|
||
height: 5rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #0080FC;
|
||
transition: left 0.3s ease;
|
||
}
|
||
}
|
||
|
||
.setting-warn {
|
||
width: 89%;
|
||
margin-left: 5.5%;
|
||
border: 2rpx dashed #EE2C35;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #EE2C35;
|
||
padding-left: 20rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #FFF6F6;
|
||
font-size: 25rpx;
|
||
margin-top: -10rpx;
|
||
margin-bottom: 10rpx;
|
||
overflow: hidden;
|
||
transition: max-height 500ms ease, opacity 500ms ease;
|
||
height: 47rpx;
|
||
/* 写死 */
|
||
line-height: 47rpx;
|
||
/* 文字垂直居中 */
|
||
}
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
right: 52rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small {
|
||
position: absolute;
|
||
top: 1.2rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
.right-tags-title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
|
||
.blue-icon {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 20rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
|
||
.blue-text {
|
||
position: absolute;
|
||
right: 4%;
|
||
top: 70rpx;
|
||
width: 93%;
|
||
z-index: 1;
|
||
height: 80rpx;
|
||
background-color: #fff;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* flex-direction: column; */
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 25rpx;
|
||
font-size: 30rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
right: 22rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small {
|
||
position: absolute;
|
||
top: 1.6rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.right-setting {
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 20rpx;
|
||
width: 90rpx;
|
||
height: 46rpx;
|
||
background-color: #F2F3F8;
|
||
color: #555555;
|
||
font-size: 27rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #E5E5E5;
|
||
}
|
||
|
||
.right-setting-target {
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 20rpx;
|
||
width: 90rpx;
|
||
height: 46rpx;
|
||
background-color: #F2F3F8;
|
||
color: #0089FE;
|
||
font-size: 27rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #0089FE;
|
||
}
|
||
}
|
||
|
||
.right-contont {
|
||
width: 100%;
|
||
height: 140rpx;
|
||
display: flex;
|
||
|
||
|
||
.tags-detail {
|
||
position: absolute;
|
||
width: 94%;
|
||
left: 3%;
|
||
top: 200rpx;
|
||
height: 150rpx;
|
||
background-color: #fff;
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 25rpx;
|
||
padding-top: 17rpx;
|
||
padding-left: 25rpx;
|
||
z-index: 200;
|
||
|
||
.tags-instant {
|
||
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.tags-small-instant {
|
||
position: absolute;
|
||
top: 1.2rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
|
||
}
|
||
|
||
.tags-title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tags-contain {
|
||
width: 95%;
|
||
height: 100rpx;
|
||
margin-top: 5rpx;
|
||
color: #666666;
|
||
font-size: 25rpx;
|
||
/* background-color: red; */
|
||
}
|
||
|
||
.triangle-instant {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small-instant {
|
||
position: absolute;
|
||
top: 1.2rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tags-leftmenu {
|
||
width: 47%;
|
||
height: 100%;
|
||
position: relative;
|
||
display: flex;
|
||
|
||
.leftmenu-shu {
|
||
position: absolute;
|
||
top: 30%;
|
||
right: 0;
|
||
transform: translateY(-30%);
|
||
width: 1rpx;
|
||
height: 70%;
|
||
background-color: #EEEEEE;
|
||
}
|
||
}
|
||
|
||
.tags-rightmenu {
|
||
width: 52%;
|
||
height: 100%;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.blue-shu {
|
||
background-color: #0089FE;
|
||
width: 9rpx;
|
||
height: 26rpx;
|
||
border-radius: 5rpx;
|
||
margin-right: 13rpx;
|
||
}
|
||
|
||
.blue-font {
|
||
font-size: 33rpx;
|
||
}
|
||
|
||
.title-time-border-hisOk {
|
||
border: 2rpx solid #D4E4FE;
|
||
width: calc(100% - 15rpx);
|
||
height: calc(100% - 15rpx);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #F6F9FF;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.title-time-border-error {
|
||
border: 2rpx solid red;
|
||
width: calc(100% - 15rpx);
|
||
height: calc(100% - 15rpx);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: rgba(238, 44, 53, 0.05);
|
||
flex-direction: column;
|
||
}
|
||
|
||
.title-time-border-own {
|
||
border: 2rpx dashed #5E8EF6;
|
||
width: calc(100% - 15rpx);
|
||
height: calc(100% - 15rpx);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #F6F9FF;
|
||
flex-direction: column;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.title-time {
|
||
display: flex;
|
||
width: 100%;
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 25rpx;
|
||
padding-top: 18rpx;
|
||
|
||
.card-time {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.card-time-red {
|
||
position: absolute;
|
||
bottom: 15rpx;
|
||
left: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #E33B3B;
|
||
}
|
||
|
||
.card-time-blue {
|
||
position: absolute;
|
||
bottom: 15rpx;
|
||
left: 20rpx;
|
||
font-size: 28rpx;
|
||
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;
|
||
}
|
||
}
|
||
|
||
.weight-time {
|
||
display: flex;
|
||
}
|
||
|
||
.haven-img {
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
position: absolute;
|
||
top: 45%;
|
||
left: 50%;
|
||
transform: translate(-45%, -50%);
|
||
}
|
||
|
||
.forfixed {
|
||
width: 100%;
|
||
height: 240rpx;
|
||
position: relative;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
.right-instant {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 240rpx;
|
||
border-radius: 35rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
.explain-text {
|
||
position: absolute;
|
||
right: 4%;
|
||
top: 70rpx;
|
||
width: 93%;
|
||
z-index: 1;
|
||
height: 80rpx;
|
||
background-color: #fff;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* flex-direction: column; */
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 25rpx;
|
||
font-size: 30rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
right: 22rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small {
|
||
position: absolute;
|
||
top: 1.6rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.explain-icon {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 20rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
}
|
||
|
||
.right-instant-more {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 580rpx;
|
||
border-radius: 35rpx;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 20;
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.right-instant-title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
|
||
.right-setting {
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 20rpx;
|
||
width: 90rpx;
|
||
height: 46rpx;
|
||
background-color: #F2F3F8;
|
||
color: #555555;
|
||
font-size: 27rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #E5E5E5;
|
||
}
|
||
|
||
.right-setting-target {
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 20rpx;
|
||
width: 90rpx;
|
||
height: 46rpx;
|
||
background-color: #F2F3F8;
|
||
color: #0089FE;
|
||
font-size: 27rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #0089FE;
|
||
}
|
||
}
|
||
|
||
.right-instant-items {
|
||
width: 100%;
|
||
height: 120rpx;
|
||
position: relative;
|
||
margin-top: -15rpx;
|
||
|
||
/* background-color: red; */
|
||
.small-instant {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.big-instant {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
margin-left: 5%;
|
||
width: 90%;
|
||
height: 200%;
|
||
}
|
||
|
||
.instant-more {
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -40rpx;
|
||
transform: translateX(-50%);
|
||
/* transform: rotate(180deg); */
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.more-imge {
|
||
width: 21rpx;
|
||
height: 21rpx;
|
||
}
|
||
}
|
||
|
||
.instant {
|
||
width: 33%;
|
||
height: 155rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
/* 中心为轴心 */
|
||
transform-origin: center center;
|
||
/* 放大/缩回的过渡时间（这里设为 120ms，感觉更顺滑） */
|
||
transition: transform 1s cubic-bezier(.2, .9, .3, 1);
|
||
position: relative;
|
||
|
||
.instant-close {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
/* background-color: #0184db; */
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 20rpx;
|
||
right: 20rpx;
|
||
z-index: 10;
|
||
color: #fff;
|
||
}
|
||
|
||
.instant-icon {
|
||
width: 62rpx;
|
||
height: 62rpx;
|
||
/* 性能关键 */
|
||
will-change: transform;
|
||
transform-origin: 50% 52%;
|
||
}
|
||
|
||
.instant-text {
|
||
white-space: nowrap;
|
||
color: #818181;
|
||
font-size: 27rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* iOS 风格抖动 */
|
||
@keyframes wiggle {
|
||
0% {
|
||
transform: rotate(-20deg);
|
||
}
|
||
|
||
50% {
|
||
transform: rotate(20deg);
|
||
}
|
||
|
||
100% {
|
||
transform: rotate(-20deg);
|
||
}
|
||
}
|
||
|
||
.wiggle {
|
||
animation: wiggle 0.3s linear infinite;
|
||
}
|
||
|
||
.right-tree {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 650rpx;
|
||
border-radius: 35rpx;
|
||
position: relative;
|
||
margin-top: 18rpx;
|
||
padding-top: 30rpx;
|
||
|
||
.right-servers {
|
||
width: 100%;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.explain-text {
|
||
position: absolute;
|
||
right: 4%;
|
||
top: 55rpx;
|
||
width: 93%;
|
||
z-index: 1;
|
||
height: 120rpx;
|
||
background-color: #fff;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* flex-direction: column; */
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 25rpx;
|
||
font-size: 30rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
right: 22rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small {
|
||
position: absolute;
|
||
top: 1.6rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.explain-icon {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 25rpx;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
}
|
||
|
||
.servers-heng {
|
||
position: absolute;
|
||
bottom: -10rpx;
|
||
left: 96rpx;
|
||
width: 27rpx;
|
||
height: 9.5rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #0080FC;
|
||
transition: left 0.3s ease;
|
||
}
|
||
|
||
.server {
|
||
font-size: 35rpx;
|
||
margin-left: 40rpx;
|
||
}
|
||
|
||
.servertarget {
|
||
font-size: 35rpx;
|
||
margin-left: 40rpx;
|
||
font-weight: 800;
|
||
}
|
||
}
|
||
}
|
||
|
||
.target-items-father {
|
||
margin-top: 20rpx;
|
||
width: 90%;
|
||
margin-left: 7%;
|
||
height: 510rpx;
|
||
position: relative;
|
||
|
||
|
||
|
||
.target-edit {
|
||
position: absolute;
|
||
right: 5rpx;
|
||
bottom: 5rpx;
|
||
width: 130rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #F5FAFF;
|
||
border: 2rpx solid #0080FC;
|
||
border-radius: 10rpx;
|
||
color: #0089FE;
|
||
font-size: 33rpx;
|
||
}
|
||
|
||
.target-items {
|
||
width: 100%;
|
||
height: 50rpx;
|
||
margin-top: 30rpx;
|
||
margin-left: -5rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.target-gray {
|
||
background-color: #F8F8FA;
|
||
border: 1rpx solid #D5D5D5;
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: center;
|
||
padding: 0 18rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #222222;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
.target-contain {
|
||
margin-top: 20rpx;
|
||
height: 135rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
/* background-color: blue; */
|
||
.image-father {
|
||
width: 100rpx;
|
||
height: 150rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
/* align-items: center; */
|
||
.target-img {
|
||
margin-top: 20rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
}
|
||
}
|
||
|
||
.image-right {
|
||
width: 500rpx;
|
||
height: 100%;
|
||
margin-left: 6rpx;
|
||
|
||
/* background-color: green; */
|
||
.right-title {
|
||
font-size: 31rpx;
|
||
color: #555555;
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.target-many {
|
||
/* margin-top: 10rpx; */
|
||
height: 75rpx;
|
||
width: 150rpx;
|
||
display: flex;
|
||
|
||
/* background-color: red; */
|
||
.target-strart {
|
||
font-size: 55rpx;
|
||
color: #2A2A2A;
|
||
font-weight: 800;
|
||
margin-right: 6rpx;
|
||
}
|
||
|
||
.target-other {
|
||
min-width: 800rpx;
|
||
margin-top: 35rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
/* background-color: red; */
|
||
.target-blue {
|
||
color: #0089FE;
|
||
}
|
||
|
||
.target-shu {
|
||
margin: 0 10rpx;
|
||
color: #919191;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.target-smalltext {
|
||
width: 95%;
|
||
height: 200rpx;
|
||
/* background-color: red; */
|
||
color: #666666;
|
||
font-size: 27rpx;
|
||
}
|
||
}
|
||
|
||
.edit-open {
|
||
position: absolute;
|
||
top: 310rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 472rpx;
|
||
background-color: #fff;
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 35rpx;
|
||
z-index: 1;
|
||
|
||
.edit-Frequency {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
font-size: 28rpx;
|
||
/* padding-top: 10rpx; */
|
||
|
||
.Frequency-one {
|
||
height: 80rpx;
|
||
width: 110%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.Frequency-box {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 2rpx solid #D2D2D2;
|
||
border-radius: 10rpx;
|
||
margin-left: 10rpx;
|
||
margin-right: 15rpx;
|
||
|
||
.box {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
}
|
||
}
|
||
|
||
.Frequency-add {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 45rpx;
|
||
border: 2rpx solid #D2D2D2;
|
||
margin: 0 15rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.Frequency-input {
|
||
width: 90rpx;
|
||
height: 58rpx;
|
||
font-size: 30rpx;
|
||
color: #0089FE;
|
||
border: 2rpx solid black;
|
||
border-radius: 10rpx;
|
||
|
||
.center-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-week {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.week-day {
|
||
width: 25%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* background-color: blue; */
|
||
}
|
||
}
|
||
|
||
.edit-month {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
margin-top: -30rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.month-day {
|
||
width: 14%;
|
||
height: 50rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 27rpx;
|
||
color: #666666;
|
||
/* background-color: red; */
|
||
/* background-color: blue; */
|
||
}
|
||
}
|
||
|
||
.edit-right {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
bottom: 25rpx;
|
||
width: 120rpx;
|
||
height: 55rpx;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #0080FC;
|
||
border: 2rpx solid #0080FC;
|
||
border-radius: 10rpx;
|
||
background-color: #F5FAFF;
|
||
}
|
||
|
||
.triangle {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
right: 250rpx;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small {
|
||
position: absolute;
|
||
top: 1.2rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
|
||
.edit-menu {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: 35rpx;
|
||
position: relative;
|
||
|
||
.edit-tags {
|
||
width: 100rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.edit-heng {
|
||
position: absolute;
|
||
bottom: 23rpx;
|
||
left: 40rpx;
|
||
width: 20rpx;
|
||
height: 5rpx;
|
||
border-radius: 5rpx;
|
||
background-color: #0080FC;
|
||
transition: left 0.3s ease;
|
||
}
|
||
}
|
||
}
|
||
|
||
.three-items {
|
||
margin-top: 20rpx;
|
||
width: 90%;
|
||
margin-left: 7%;
|
||
height: 510rpx;
|
||
display: flex;
|
||
|
||
/* 禁止元素拖动 */
|
||
.tree-item {
|
||
width: 33.33%;
|
||
height: 100%;
|
||
|
||
.tree-card {
|
||
width: 100%;
|
||
height: 20%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
|
||
/* 禁止元素拖动 */
|
||
.card-icon {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
|
||
}
|
||
|
||
.card-text {
|
||
margin-top: -10rpx;
|
||
color: #818181;
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-finally {
|
||
background-color: #fff;
|
||
width: 100%;
|
||
height: 115rpx;
|
||
border-radius: 35rpx;
|
||
position: relative;
|
||
margin-top: 18rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.finally-older {
|
||
margin-left: 28rpx;
|
||
width: 4.3vw;
|
||
height: 4.3vw;
|
||
border: 1rpx solid #DCDCDC;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.fin-button {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin-left: 50rpx;
|
||
position: relative;
|
||
|
||
.button-imge {
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
margin-bottom: 1rpx;
|
||
}
|
||
|
||
.button-text {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.blue-right {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 200rpx;
|
||
height: 70%;
|
||
background-color: #0089FE;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 35rpx;
|
||
}
|
||
}
|
||
|
||
.move-view {
|
||
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: 10;
|
||
}
|
||
|
||
.target-shu {
|
||
font-size: 32rpx;
|
||
color: #9e9e9e;
|
||
margin: 0 8rpx;
|
||
|
||
}
|
||
|
||
.card-bao {
|
||
position: absolute;
|
||
left: 35rpx;
|
||
top: 110rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #4690FF;
|
||
color: #fff;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.forscroll {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
|
||
.instant-detail {
|
||
position: absolute;
|
||
width: 104%;
|
||
left: -2%;
|
||
top: 0;
|
||
height: 150rpx;
|
||
background-color: #fff;
|
||
border: 2rpx solid rgba(0, 137, 254, 0.29);
|
||
border-radius: 25rpx;
|
||
padding-top: 17rpx;
|
||
padding-left: 25rpx;
|
||
|
||
.detail-title {
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.detail-contain {
|
||
width: 95%;
|
||
height: 100rpx;
|
||
margin-top: 5rpx;
|
||
color: #666666;
|
||
font-size: 25rpx;
|
||
/* background-color: red; */
|
||
}
|
||
|
||
.triangle-instant {
|
||
position: absolute;
|
||
top: -8.34rpx;
|
||
left: 0;
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid rgba(0, 137, 254, 0.29);
|
||
|
||
.triangle-small-instant {
|
||
position: absolute;
|
||
top: 1.2rpx;
|
||
right: 50%;
|
||
transform: translateX(50%);
|
||
width: 0;
|
||
height: 0;
|
||
border-left: 14.44rpx solid transparent;
|
||
border-right: 14.44rpx solid transparent;
|
||
border-bottom: 8.34rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pop {
|
||
transform: scale(1.3);
|
||
}
|
||
|
||
.pack-title {
|
||
width: 100%;
|
||
height: 180rpx;
|
||
|
||
.pack-father {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.packs {
|
||
height: 100%;
|
||
min-width: 180rpx;
|
||
border-top-right-radius: 30rpx;
|
||
border-top-left-radius: 30rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
position: relative;
|
||
|
||
.blue-heng {
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 30%;
|
||
height: 3rpx;
|
||
background-color: #73B8FF;
|
||
}
|
||
|
||
.pack-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 3rpx;
|
||
margin-top: -30rpx;
|
||
}
|
||
|
||
.pack-text {
|
||
width: 100%;
|
||
height: 10rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pack-detail {
|
||
width: 100%;
|
||
height: 300rpx;
|
||
/* border-bottom-left-radius: 40rpx;
|
||
border-bottom-right-radius: 40rpx; */
|
||
/* background-color: #fafafa; */
|
||
/* padding: 30rpx 0; */
|
||
padding-top: 15rpx;
|
||
padding-bottom: 10rpx;
|
||
|
||
.detail-father {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
color: #666666;
|
||
|
||
.details {
|
||
height: 150rpx;
|
||
min-width: 180rpx;
|
||
max-width: 180rpx;
|
||
/* border: 1rpx solid black; */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
/* white-space: nowrap; */
|
||
/* 不换行 */
|
||
/* overflow: hidden; */
|
||
|
||
|
||
.detail-icon {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.pack-heng {
|
||
width: 100%;
|
||
height: 1rpx;
|
||
background-color: #E5E5E5;
|
||
margin-top: 0rpx;
|
||
/* margin-left: -12rpx; */
|
||
}
|
||
|
||
.packtargetmessage {
|
||
width: 200%;
|
||
height: 70rpx;
|
||
display: flex;
|
||
|
||
.packtargetmessage-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-left: -5rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.packtarget-font {
|
||
margin-left: 8rpx;
|
||
font-size: 27rpx;
|
||
color: #0089FE;
|
||
margin-top: 18rpx;
|
||
white-space: nowrap;
|
||
/* 不换行 */
|
||
overflow: hidden;
|
||
/* 超出隐藏 */
|
||
text-overflow: ellipsis;
|
||
/* 显示省略号 */
|
||
width: 140rpx;
|
||
}
|
||
|
||
.packtarget-strart {
|
||
/* margin-left: 8rpx; */
|
||
font-size: 50rpx;
|
||
color: #2A2A2A;
|
||
font-weight: 800;
|
||
|
||
margin-top: -2rpx;
|
||
}
|
||
|
||
.packtarget-other {
|
||
/* min-width: 800rpx; */
|
||
/* margin-top: 10rpx; */
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
/* background-color: red; */
|
||
.packtarget-blue {
|
||
color: #0089FE;
|
||
}
|
||
|
||
.packtarget-shu {
|
||
margin: 0 10rpx;
|
||
color: #919191;
|
||
}
|
||
}
|
||
}
|
||
|
||
.packtarget-heng {
|
||
width: 100%;
|
||
height: 1rpx;
|
||
background-color: #E5E5E5;
|
||
margin-top: 3rpx;
|
||
margin-left: -12rpx;
|
||
}
|
||
|
||
.packtarget-detail {
|
||
width: 100%;
|
||
height: 250rpx;
|
||
|
||
.detail-father {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
flex-wrap: wrap;
|
||
color: #666666;
|
||
|
||
|
||
.details {
|
||
height: 125rpx;
|
||
min-width: 180rpx;
|
||
max-width: 180rpx;
|
||
/* border: 1rpx solid black; */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
/* white-space: nowrap; */
|
||
/* 不换行 */
|
||
/* overflow: hidden; */
|
||
font-size: 25rpx;
|
||
|
||
.detail-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.packtarget-end {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
display: flex;
|
||
padding-top: 15rpx;
|
||
position: relative;
|
||
|
||
|
||
.target-edit {
|
||
position: absolute;
|
||
right: 5rpx;
|
||
bottom: 5rpx;
|
||
width: 130rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #F5FAFF;
|
||
border: 2rpx solid #0080FC;
|
||
border-radius: 10rpx;
|
||
color: #0089FE;
|
||
font-size: 33rpx;
|
||
}
|
||
|
||
.end-icon {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
margin-left: -5rpx;
|
||
margin-top: 5rpx;
|
||
margin-right: 5rpx;
|
||
}
|
||
}
|
||
|
||
.packtarget-title {
|
||
width: 100%;
|
||
height: 40rpx;
|
||
display: flex;
|
||
position: relative;
|
||
|
||
.target-gray {
|
||
background-color: #F8F8FA;
|
||
border: 1rpx solid #D5D5D5;
|
||
display: flex;
|
||
height: 100%;
|
||
align-items: center;
|
||
padding: 0 10rpx;
|
||
border-radius: 10rpx;
|
||
font-size: 23rpx;
|
||
color: #222222;
|
||
}
|
||
|
||
.target-black {
|
||
position: absolute;
|
||
top: 2.5rpx;
|
||
right: 0;
|
||
font-size: 29rpx;
|
||
/* margin-top: 3rpx; */
|
||
}
|
||
|
||
.target-shu {
|
||
margin: 0 7rpx;
|
||
margin-top: 5rpx;
|
||
font-size: 23rpx;
|
||
color: #919191;
|
||
}
|
||
}
|
||
|
||
.packtarget-serviceContent {
|
||
width: 430rpx;
|
||
height: 100rpx;
|
||
margin-top: 10rpx;
|
||
font-size: 25rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
/* 隐藏状态 */
|
||
.collapsed {
|
||
max-height: 0;
|
||
opacity: 0;
|
||
padding-top: 0;
|
||
/* 如需彻底压缩可把内边距也为0 */
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
/* 展开状态 */
|
||
.expanded {
|
||
max-height: 47rpx;
|
||
opacity: 1;
|
||
}
|
||
|
||
.card-box {
|
||
margin-top: 20rpx;
|
||
width: 259rpx;
|
||
height: 245rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
will-change: transform;
|
||
pointer-events: none;
|
||
z-index: 200;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.title-time-blue-card {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 98%;
|
||
height: 98%;
|
||
z-index: 10;
|
||
|
||
.blue-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.card-bao {
|
||
position: absolute;
|
||
left: 35rpx;
|
||
top: 110rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #4690FF;
|
||
color: #fff;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.title-time-border-hisOk {
|
||
border: 2rpx solid #D4E4FE;
|
||
width: calc(100% - 15rpx);
|
||
height: calc(100% - 15rpx);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #F6F9FF;
|
||
flex-direction: column;
|
||
font-size: 30rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #46B2F6;
|
||
|
||
.title-time {
|
||
display: flex;
|
||
width: 100%;
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 25rpx;
|
||
padding-top: 18rpx;
|
||
flex-direction: column;
|
||
|
||
.title-time-font-rel {
|
||
margin-top: 9rpx;
|
||
font-size: 33rpx;
|
||
font-weight: 800;
|
||
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;
|
||
}
|
||
|
||
.card-time {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
font-size: 30rpx;
|
||
|
||
.weight-time {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
} |