openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #119 in YR/star-web-components from fix-lockscreen-time-position to master 

* commit '5f90346984fcc48bcc5aa654098f58d777c6a7e5':
  BUG: #146673 修复H5桌面锁屏时间显示错乱
  TASK: #118894 优化锁屏界面时间以及关机重启按钮
This commit is contained in:
汪昌棋 2022-11-05 12:28:25 +08:00
parent 7bccd93cf2 5f90346984
commit f83d35cf64
4 changed files with 42 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/base/auto-px-style.ts
View File

@ -8,36 +8,49 @@ export const autoPxStyle: CSSResult = css`
--auto-12px: calc(12px / var(--hostDevicePixelRatio));
--auto-14px: calc(14px / var(--hostDevicePixelRatio));
--auto-15px: calc(15px / var(--hostDevicePixelRatio));
--auto-16px: calc(16px / var(--hostDevicePixelRatio));
--auto-18px: calc(18px / var(--hostDevicePixelRatio));
--auto-24px: calc(24px / var(--hostDevicePixelRatio));
--auto-26px: calc(26px / var(--hostDevicePixelRatio));
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
--auto-28px: calc(28px / var(--hostDevicePixelRatio));
--auto-30px: calc(30px / var(--hostDevicePixelRatio));
--auto-32px: calc(32px / var(--hostDevicePixelRatio));
--auto-34px: calc(34px / var(--hostDevicePixelRatio));
--auto-36px: calc(36px / var(--hostDevicePixelRatio));
--auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
--auto-40px: calc(40px / var(--hostDevicePixelRatio));
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
--auto-48px: calc(48px / var(--hostDevicePixelRatio));
--auto-50px: calc(50px / var(--hostDevicePixelRatio));
--auto-56px: calc(56px / var(--hostDevicePixelRatio));
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
--auto-64px: calc(64px / var(--hostDevicePixelRatio));
--auto-66px: calc(66px / var(--hostDevicePixelRatio));
--auto-76px: calc(76px / var(--hostDevicePixelRatio));
--auto-80px: calc(80px / var(--hostDevicePixelRatio));
--auto-88px: calc(88px / var(--hostDevicePixelRatio));
--auto-92px: calc(92px / var(--hostDevicePixelRatio));
--auto-96px: calc(96px / var(--hostDevicePixelRatio));
--auto-112px: calc(112px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-152px: calc(152px / var(--hostDevicePixelRatio));
--auto-176px: calc(176px / var(--hostDevicePixelRatio));
--auto-200px: calc(200px / var(--hostDevicePixelRatio));
--auto-201px: calc(201px / var(--hostDevicePixelRatio));
--auto-206px: calc(206px / var(--hostDevicePixelRatio));
--auto-208px: calc(208px / var(--hostDevicePixelRatio));
--auto-260px: calc(260px / var(--hostDevicePixelRatio));
--auto-310px: calc(310px / var(--hostDevicePixelRatio));
--auto-312px: calc(312px / var(--hostDevicePixelRatio));
--auto-320px: calc(320px / var(--hostDevicePixelRatio));
--auto-334px: calc(334px / var(--hostDevicePixelRatio));
--auto-368px: calc(368px / var(--hostDevicePixelRatio));
--auto-418px: calc(418px / var(--hostDevicePixelRatio));
--auto-440px: calc(440px / var(--hostDevicePixelRatio));
--auto-520px: calc(520px / var(--hostDevicePixelRatio));
--auto-25_6px: calc(25.6px / var(--hostDevicePixelRatio));
--auto-37_33px: calc(37.33px / var(--hostDevicePixelRatio));
--auto-38_4px: calc(38.4px / var(--hostDevicePixelRatio));
--auto-44_8px: calc(44.8px / var(--hostDevicePixelRatio));
--auto-46_67px: calc(46.67px / var(--hostDevicePixelRatio));
--auto-57_6px: calc(57.6px / var(--hostDevicePixelRatio));
--auto-607px: calc(607px / var(--hostDevicePixelRatio));
}
`

12
src/components/clock-widget/clock-widget-style.ts
View File

@ -2,8 +2,16 @@ import {css} from 'lit'
export default css`
clock-time {
position: absolute;
display: inline-flex;
align-items: center;
vertical-align: middle;
line-height: var(--auto-96px);
width: 100%;
height: 100%;
}
clock-date {
display: inline-flex;
vertical-align: middle;
width: 100%;
margin-top: var(--auto-28px);
}
`

20
src/components/clock-widget/date/date-style.ts
View File

@ -2,13 +2,8 @@ import {css} from 'lit'
export default css`
#clock-date {
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 25px;
text-align: center;
top: 16.4%;
margin: auto;
}
@media screen and (max-width: 640px) {
@ -16,12 +11,8 @@ export default css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 24px;
font-size: var(--auto-48px);
line-height: 29px;
text-align: center;
top: 72.68%;
position: absolute;
width: 100%;
}
}
@ -30,12 +21,7 @@ export default css`
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 17px;
text-align: center;
top: 72.68%;
position: absolute;
width: 100%;
font-size: var(--auto-48px);
}
}
`

29
src/components/clock-widget/time/time-style.ts
View File

@ -2,42 +2,33 @@ import {css} from 'lit'
export default css`
#clock-time-minute {
position: absolute;
left: 34.8%;
top: 35.4%;
flex: 1;
text-align: right;
padding-inline-end: var(--auto-10px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 220px;
line-height: 220px;
height: 220px;
text-align: left;
color: #ffffff;
font-size: var(--auto-128px);
opacity: 0.67;
}
#clock-time-hour {
position: absolute;
left: 50.6%;
top: 35.4%;
height: 220px;
flex: 1;
text-align: left;
padding-inline-start: var(--auto-10px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 220px;
line-height: 220px;
font-size: var(--auto-128px);
/* identical to box height, or 100% */
text-align: left;
/* 主题色/黄金渐变 */
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
@media screen and (max-width: 640px) {
/* @media screen and (max-width: 640px) {
#clock-time-minute {
font-weight: 600;
font-size: 64px;
@ -67,5 +58,5 @@ export default css`
line-height: 43px;
height: 43px;
}
}
} */
`