成达考勤大屏幕

SGGL/FineUIPro.Web/res/css/kqshowscreen.css

@@ -0,0 +1,134 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-size: .175rem;
+    color: #1ab1ff;
+}
+*::-webkit-scrollbar{
+    display: none;
+}
+html,body{
+    height: 100%;
+    width: 100%;
+}
+
+.context{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    padding: .25rem;
+    background-color: #010a2c;
+}
+.site{
+    flex: 1;
+    padding: .125rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.block{
+    height: calc((100% - .5rem) / 3);
+    width: 100%;
+    border: 2px solid #112A67;
+    border-radius: .125rem;
+
+}
+.block1>.title,
+.block>.title{
+    color: #00ffff;
+    font-weight: 700;
+    font-size: .175rem;
+    text-align: center;
+    line-height: .35rem;
+}
+.block>.main{
+    height: calc(100% - .35rem);
+    width: 100%;
+    padding: .25rem;
+    
+}
+.context>.right{
+    padding-top: .25rem;
+}
+.block1{
+    height: calc((100% - .5rem) / 3 * 2 + .25rem);
+    background-color: #010E35;
+    border: 2px solid #112A67;
+    border-radius: .125rem;
+}
+
+.xc{
+    background-image: url(../image/y01.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 60% 90%;
+    /* background-size: ; */
+}
+.xc>.number{
+    text-align: center;
+    color: #1ab1ff;
+    margin-top: .375rem;
+    font-size: .375rem;
+    font-weight: 700;
+}
+.gsxc{
+    height: 100%;
+    width: 100%;
+}
+ ul{
+    width: 100%;
+    padding: 0 .375rem;
+}
+ul>li{
+    padding: .1rem 0;
+    width: 100%;
+    list-style: none;
+    display: flex;
+}
+ul>li>span{
+    flex: 1;
+    font-size: .2rem;
+    font-weight: 500;
+}
+.gsxc ul>li>span:nth-child(2){
+    color: #00ffff;
+    font-size: .25rem;
+    font-weight: 600;
+}
+
+.context .right{
+    flex: 2;
+}
+
+.context>.right>.block1>.top{
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+
+}
+
+.context>.right>.block1>.top>.info{
+    width: 58%;
+    padding: .75rem .5rem .25rem;
+}
+.context>.right>.block1>.top>.photo{
+    width: 42%;
+    padding: .25rem .875rem 1rem .875rem;
+}
+.context>.right>.block1>.top>.photo>img{
+    width: 100%;
+    height: 100%;
+}
+img{
+    user-drag: none;
+user-select: none; 
+-moz-user-select: none; 
+-webkit-user-drag: none; 
+-webkit-user-select: none; 
+-ms-user-select: none; 
+}
+#gwnum{
+    padding: .125rem;
+}

SGGL/FineUIPro.Web/res/lib/flex.js

@@ -0,0 +1,52 @@
+(function flexible(window, document) {
+    var docEl = document.documentElement
+    var dpr = window.devicePixelRatio || 1
+   
+    // adjust body font size
+    function setBodyFontSize() {
+      if (document.body) {
+        document.body.style.fontSize = (16 * dpr) + 'px'
+      }
+      else {
+        document.addEventListener('DOMContentLoaded', setBodyFontSize)
+      }
+    }
+    setBodyFontSize();
+   
+    function setRemUnit() {
+      var rem = docEl.clientWidth / 24
+      docEl.style.fontSize = rem + 'px'
+    }
+   
+    setRemUnit()
+   
+    // reset rem unit on page resize
+    window.addEventListener('resize', setRemUnit)
+    window.addEventListener('pageshow', function (e) {
+      if (e.persisted) {
+        setRemUnit()
+      }
+    })
+   
+    // detect 0.5px supports
+    if (dpr >= 2) {
+      var fakeBody = document.createElement('body')
+      var testElement = document.createElement('div')
+      testElement.style.border = '.5px solid transparent'
+      fakeBody.appendChild(testElement)
+      docEl.appendChild(fakeBody)
+      if (testElement.offsetHeight === 1) {
+        docEl.classList.add('hairlines')
+      }
+      docEl.removeChild(fakeBody)
+    }
+  }(window, document))
+
+
+
+  function fontSize(res){
+    let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
+    if (!clientWidth) return;
+    let fontSize = clientWidth / 1920;
+    return res*fontSize;
+}