yangjun
/
hldy_app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
hldy_app/unpackage/dist/dev/app-plus/pages/watch/index.css

643 lines
15 KiB
CSS
Raw Normal View History

1
2025-08-13 17:19:40 +08:00
.drawer[data-v-f2f12044] {
position: fixed;
bottom: 0;
right: 0;
height: 85vh;
background: #eff0f4;
z-index: 1000;
border-top-left-radius: 2.5rem;
border-bottom-left-radius: 2.5rem;
/* 初始隐藏 */
transform: translateX(100%);
transition: transform 0.4s ease;
}
.drawer-open[data-v-f2f12044] {
transform: translateX(0);
}
.drawer-content[data-v-f2f12044] {
position: relative;
width: 100%;
height: 100%;
}
.drawer-content-circle[data-v-f2f12044] {
position: absolute;
999999
2025-08-21 16:51:53 +08:00
bottom: 7.5rem;
1
2025-08-13 17:19:40 +08:00
left: -1.875rem;
width: 4.6875rem;
height: 5rem;
border-radius: 50%;
z-index: -1;
background: linear-gradient(to right, #fff 0, #eff0f4 1.875rem, #eff0f4 100%);
display: flex;
align-items: center;
-webkit-clip-path: inset(0 60% 0 0);
clip-path: inset(0 60% 0 0);
}
.drawer-img[data-v-f2f12044] {
width: 0.625rem;
height: 0.625rem;
margin-left: 0.78125rem;
}
1111
2025-08-29 17:33:30 +08:00
.target[data-v-f2f12044] {
--color: #99C9FD;
--thick: 2px;
--radius: 4.6875rem;
--outline-offset: 0.15625rem;
/* 外扩多少 */
/* 内层虚线（你现在用的） */
border-radius: var(--radius);
background-color: #ddf0ff;
/* 内部背景 */
animation: scalePulse 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* 外层虚线：放在 outline（不会影响元素尺寸） */
outline: var(--thick) dashed var(--color);
outline-offset: var(--outline-offset);
/* 保证文本 / 子元素在最上层 */
z-index: 1;
}
.pulse[data-v-f2f12044] {
/* 可调参数 */
--scale: 1.2;
--dur: 0.8s;
animation: pulse-f2f12044 var(--dur) ease-in-out infinite;
transform-origin: center center;
will-change: transform;
}
/* 放大到一定值再回到原始（平滑） */
@keyframes pulse-f2f12044 {
0% {
transform: scale(1);
}
50% {
transform: scale(var(--scale));
}
100% {
transform: scale(1);
}
}
1
2025-08-13 17:19:40 +08:00
.draw-all[data-v-dfacf6bf] {
width: 100%;
height: 100%;
background-color: #eff0f4;
overflow: hidden;
position: relative;
}
1111
2025-08-29 17:33:30 +08:00
.carmera[data-v-dfacf6bf] {
1
2025-08-13 17:19:40 +08:00
position: absolute;
right: 0;
bottom: 7.8125rem;
height: 18.75rem;
width: 6.25rem;
z-index: 1;
}
1111
2025-08-29 17:33:30 +08:00
.roll[data-v-dfacf6bf] {
1
2025-08-13 17:19:40 +08:00
position: absolute;
right: 0;
bottom: 0;
height: 40.625rem;
width: 20.3125rem;
}
.compass-container[data-v-dfacf6bf] {
width: 380px;
height: 380px;
border-radius: 50%;
position: absolute;
999999
2025-08-21 16:51:53 +08:00
right: -65%;
1
2025-08-13 17:19:40 +08:00
transform: translateY(-60%);
bottom: 8.4375rem;
margin: auto;
touch-action: none;
z-index: 9999;
}
.compass-item[data-v-dfacf6bf] {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
display: flex;
align-items: center;
justify-content: center;
}
.item-label[data-v-dfacf6bf] {
font-size: 0.78125rem;
width: 4.0625rem;
height: 4.0625rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #e6e7ed, #f4f5f7);
border: 0.0625rem solid #fff;
position: relative;
}
.item-label-target[data-v-dfacf6bf] {
font-size: 0.78125rem;
width: 4.0625rem;
height: 4.0625rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(to bottom, #e6e7ed, #f4f5f7);
position: relative;
}
.item-label-second[data-v-dfacf6bf] {
font-size: 0.78125rem;
width: 4.0625rem;
height: 4.0625rem;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.all-size[data-v-dfacf6bf] {
width: 100%;
height: 100%;
}
.targetimge[data-v-dfacf6bf] {
width: 4.6875rem;
height: 4.0625rem;
position: absolute;
right: 0;
top: 0;
z-index: 1;
transition: opacity 0.8s ease;
}
.compass-container.second[data-v-dfacf6bf] {
width: 480px;
height: 480px;
border-radius: 50%;
position: absolute;
999999
2025-08-21 16:51:53 +08:00
right: -75%;
1
2025-08-13 17:19:40 +08:00
transform: translateY(-70%);
bottom: 5.375rem;
margin: auto;
touch-action: none;
z-index: 1;
}
.gesture-mask[data-v-dfacf6bf] {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 9999;
background: transparent;
1111
2025-08-29 17:33:30 +08:00
}
.pulse[data-v-dfacf6bf] {
/* 可调参数 */
111111
2025-09-02 16:48:59 +08:00
--scale: 1.5;
--dur: 1.1s;
1111
2025-08-29 17:33:30 +08:00
animation: pulse-dfacf6bf var(--dur) ease-in-out infinite;
transform-origin: center center;
will-change: transform;
}
/* 放大到一定值再回到原始（平滑） */
@keyframes pulse-dfacf6bf {
0% {
transform: scale(1);
}
50% {
transform: scale(var(--scale));
}
100% {
transform: scale(1);
}
}
.targetbutton[data-v-dfacf6bf] {
--color: #99C9FD;
--thick: 2px;
--radius: 1.875rem;
--outline-offset: -0.3125rem;
/* 外扩多少 */
/* 内层虚线（你现在用的） */
border-radius: var(--radius);
/* 内部背景 */
animation: scalePulse 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* 外层虚线：放在 outline（不会影响元素尺寸） */
outline: var(--thick) dashed var(--color);
outline-offset: var(--outline-offset);
/* 保证文本 / 子元素在最上层 */
position: relative;
z-index: 1;
1
2025-08-13 17:19:40 +08:00
}
.view[data-v-4b26e9e6] {
background-color: #eff0f4;
width: 100%;
height: 100vh;
display: flex;
}
.view .view-left[data-v-4b26e9e6] {
height: 100%;
999999
2025-08-21 16:51:53 +08:00
width: 23%;
1
2025-08-13 17:19:40 +08:00
}
.view .view-left .title-father[data-v-4b26e9e6] {
padding-top: 3.75rem;
padding-bottom: 1.5625rem;
padding-left: 1.875rem;
display: flex;
}
.view .view-left .title-father .title-img[data-v-4b26e9e6] {
width: 1.71875rem;
height: 1.71875rem;
margin-right: 0.625rem;
}
.view .view-left .title-father .title-font[data-v-4b26e9e6] {
font-size: 1.25rem;
font-weight: 800;
}
.view .view-left .menus-father[data-v-4b26e9e6] {
width: 100%;
height: 25rem;
}
.view .view-left .menus-father .menu[data-v-4b26e9e6] {
999999
2025-08-21 16:51:53 +08:00
margin: 1.40625rem 0;
margin-left: 0.9375rem;
1
2025-08-13 17:19:40 +08:00
height: 3.4375rem;
width: 9.375rem;
border-radius: 1.875rem;
overflow: hidden;
display: flex;
align-items: center;
}
.view .view-left .menus-father .menu .menu-img[data-v-4b26e9e6] {
width: 2.03125rem;
height: 2.03125rem;
margin-left: 0.78125rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.view .view-right[data-v-4b26e9e6] {
height: 100%;
999999
2025-08-21 16:51:53 +08:00
width: 90%;
1
2025-08-13 17:19:40 +08:00
position: relative;
}
.view .view-right .right-container-title-nav[data-v-4b26e9e6] {
margin-top: 1.875rem;
display: flex;
align-items: center;
height: 1.875rem;
position: relative;
font-size: 0.875rem;
}
.view .view-right .right-container-title-nav .right-icons-img[data-v-4b26e9e6] {
width: 1.875rem;
height: 1.875rem;
margin-left: 0.625rem;
margin-right: 0.625rem;
}
.view .view-right .scroll-vi[data-v-4b26e9e6] {
height: 3.125rem;
width: 100%;
margin-left: 0;
margin-top: 3.125rem;
position: relative;
display: flex;
}
.view .view-right .scroll-vi .menu[data-v-4b26e9e6] {
flex: 0 0 auto;
height: 2.8125rem;
width: 7.5rem;
border-radius: 1.5625rem;
margin-left: 0.625rem;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding-top: 0.28125rem;
}
.view .view-right .scroll-vi .menu .menu-img[data-v-4b26e9e6] {
width: 1.71875rem;
height: 1.71875rem;
margin-right: 0.46875rem;
}
.view .view-right .scroll-vi .menu .menu-font[data-v-4b26e9e6] {
margin-top: 0.5625rem;
font-size: 0.78125rem;
}
.right-container-tem[data-v-4b26e9e6] {
display: flex;
}
.right-container-tem .right-container-tem-text[data-v-4b26e9e6] {
font-size: 1rem;
margin-right: 0.625rem;
}
.right-container-tem .right-container-tem-img[data-v-4b26e9e6] {
width: 1.1875rem;
height: 1.1875rem;
}
.new-weight[data-v-4b26e9e6] {
margin: 0 0.9375rem;
margin-top: 1.25rem;
font-size: 1rem;
}
.big-bgc[data-v-4b26e9e6] {
margin-top: 0.9375rem;
999999
2025-08-21 16:51:53 +08:00
width: 39.0625rem;
1
2025-08-13 17:19:40 +08:00
height: 28.53125rem;
border-radius: 1.5625rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.small-bgc[data-v-4b26e9e6] {
999999
2025-08-21 16:51:53 +08:00
width: 9.3125rem;
1
2025-08-13 17:19:40 +08:00
height: 6.875rem;
border-radius: 0.78125rem;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.card-father[data-v-4b26e9e6] {
margin-right: 0.625rem;
}
.card-father .up-title[data-v-4b26e9e6] {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0.3125rem 0;
margin-left: 0.625rem;
font-size: 0.9375rem;
}
@keyframes glowFlash-4b26e9e6 {
0%,
100% {
box-shadow: 0 0 0.125rem #f1d7da, 0 0 0.25rem #f1d7da, 0 0 0.375rem #f1d7da;
}
50% {
box-shadow: 0 0 0.3125rem #f1d7da, 0 0 0.625rem #f1d7da, 0 0 0.9375rem #f1d7da;
}
}
.right-right[data-v-4b26e9e6] {
position: absolute;
999999
2025-08-21 16:51:53 +08:00
right: -0.625rem;
1
2025-08-13 17:19:40 +08:00
top: 7.1875rem;
height: calc(100% - 7.8125rem);
width: 20.3125rem;
}
.right-right .red-kuang[data-v-4b26e9e6] {
margin-top: 0;
margin-left: 1.5625rem;
width: 17.1875rem;
height: 5.9375rem;
border-radius: 1.5625rem;
position: relative;
display: flex;
align-items: center;
background-color: rgba(226, 227, 231, 0.5);
}
.right-right .red-kuang .blue-bgc[data-v-4b26e9e6] {
width: 4.375rem;
height: 1.875rem;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
font-size: 0.8125rem;
background-color: rgba(248, 249, 250, 0.5);
color: #017DE9;
border-radius: 0.625rem;
margin-left: 0.3125rem;
}
.right-right .red-kuang .font-weight[data-v-4b26e9e6] {
font-size: 1rem;
font-weight: 600;
}
.right-right .red-kuang .font-small[data-v-4b26e9e6] {
font-size: 0.9375rem;
}
.states-father[data-v-4b26e9e6] {
display: flex;
margin-top: 0.9375rem;
margin-left: 1.5625rem;
width: 100%;
}
.states-father .states[data-v-4b26e9e6] {
width: 5.3125rem;
margin-right: 0.46875rem;
height: 2.5rem;
border-radius: 1.875rem;
background-color: rgba(226, 227, 231, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
.states-father .phone-number[data-v-4b26e9e6] {
width: 100%;
height: 2.5rem;
display: flex;
align-items: center;
position: relative;
}
.big-view[data-v-4b26e9e6] {
margin-left: 1.5625rem;
margin-top: 0.9375rem;
width: 17.1875rem;
height: 19.53125rem;
border-radius: 1.5625rem;
background-color: rgba(226, 227, 231, 0.5);
position: relative;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
}
.big-view .font-weight[data-v-4b26e9e6] {
font-size: 1.5625rem;
margin-top: 1.40625rem;
font-weight: 600;
}
.big-view .pao[data-v-4b26e9e6] {
position: absolute;
right: 1.25rem;
top: 0.625rem;
width: 2.65625rem;
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.small-button[data-v-4b26e9e6] {
margin-top: 0.625rem;
height: 2.1875rem;
display: flex;
}
.small-button .gray-ball[data-v-4b26e9e6] {
display: flex;
justify-content: center;
align-items: center;
background-color: #F8F9FA;
width: 1.875rem;
height: 1.875rem;
border-radius: 50%;
margin: 0 0.3125rem;
}
.small-button .gray-ball .laba-img[data-v-4b26e9e6] {
width: 1.09375rem;
height: 1.09375rem;
}
.right-bottom[data-v-4b26e9e6] {
margin-left: 1.5625rem;
margin-top: 0.9375rem;
width: 17.1875rem;
height: 7.5rem;
border-radius: 1.5625rem;
background-color: rgba(226, 227, 231, 0.5);
position: relative;
}
.right-bottom .bottom-img[data-v-4b26e9e6] {
width: 1.875rem;
height: 1.875rem;
margin-bottom: 0.9375rem;
}
.right-bottom .people-card[data-v-4b26e9e6] {
width: 7.65625rem;
height: 3.125rem;
border-radius: 0.78125rem;
background-color: rgba(248, 249, 250, 0.5);
margin-left: 0.625rem;
display: flex;
justify-content: center;
align-items: center;
}
.right-father[data-v-4b26e9e6] {
width: 20.3125rem;
position: absolute;
right: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
}
.right-icons[data-v-4b26e9e6] {
position: absolute;
right: 0.9375rem;
top: 0.9375rem;
display: flex;
align-items: center;
height: 1.875rem;
}
.warning[data-v-4b26e9e6] {
animation: glowFlash-4b26e9e6 1.2s infinite ease-in-out;
border: 0.03125rem solid #ff5757;
background-color: rgba(239, 240, 244, 0.5);
}
.zoom[data-v-4b26e9e6] {
transform: scale(1.2);
transform-origin: bottom left;
transition: transform 1s ease;
}
.juzhong[data-v-4b26e9e6] {
position: absolute;
top: 0%;
left: 50%;
transform: translateX(-50%);
}
.zhezhao-left[data-v-4b26e9e6] {
position: absolute;
top: 0;
left: 0%;
height: 100%;
width: 3.75rem;
background: linear-gradient(to right, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */);
z-index: 4;
pointer-events: none;
}
.zhezhao-right[data-v-4b26e9e6] {
position: absolute;
top: 0;
right: 34%;
height: 100%;
width: 3.75rem;
background: linear-gradient(to left, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */);
z-index: 4;
pointer-events: none;
}
.zhezhao-top[data-v-4b26e9e6] {
position: absolute;
top: 6.875rem;
left: 0%;
width: 10.9375rem;
height: 3.75rem;
background: linear-gradient(to bottom, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */);
z-index: 4;
pointer-events: none;
}
.zhezhao-bottom[data-v-4b26e9e6] {
position: absolute;
bottom: 14.0625rem;
left: 0%;
width: 10.9375rem;
height: 3.75rem;
background: linear-gradient(to top, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */);
z-index: 4;
pointer-events: none;
}
.bgc-image[data-v-4b26e9e6] {
width: 15.625rem;
height: 6.25rem;
position: absolute;
top: -1.5625rem;
left: 0;
}
.font-phone[data-v-4b26e9e6] {
font-size: 1.09375rem;
font-weight: 600;
margin-left: 0.9375rem;
}
.phone-ball[data-v-4b26e9e6] {
width: 1.5625rem;
height: 1.5625rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 4.0625rem;
}
1111
2025-08-29 17:33:30 +08:00
.target[data-v-4b26e9e6] {
--color: #99C9FD;
--thick: 2px;
--radius: 1.875rem;
--outline-offset: 0;
/* 外扩多少 */
/* 内层虚线（你现在用的） */
border-radius: var(--radius);
background-color: #ddf0ff;
/* 内部背景 */
animation: scalePulse 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* 外层虚线：放在 outline（不会影响元素尺寸） */
outline: var(--thick) dashed var(--color);
outline-offset: var(--outline-offset);
/* 保证文本 / 子元素在最上层 */
position: relative;
z-index: 1;
}
.targetbutton[data-v-4b26e9e6] {
--color: #99C9FD;
--thick: 2px;
--radius: 1.875rem;
--outline-offset: 0.3125rem;
/* 外扩多少 */
/* 内层虚线（你现在用的） */
border-radius: var(--radius);
/* 内部背景 */
animation: scalePulse 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
/* 外层虚线：放在 outline（不会影响元素尺寸） */
outline: var(--thick) dashed var(--color);
outline-offset: var(--outline-offset);
/* 保证文本 / 子元素在最上层 */
position: relative;
z-index: 1;
}