✨ 签到ui改版

resources/template/sign/main.css

@@ -0,0 +1,279 @@
+@font-face {
+    font-family: cr105Font;
+    /* 导入的字体文件 */
+    src: url("./res/font/ChillReunion_105S.otf");
+}
+
+@font-face {
+    font-family: cr95Font;
+    /* 导入的字体文件 */
+    src: url("./res/font/ChillReunion_95.otf");
+}
+
+@font-face {
+    font-family: cr65sFont;
+    /* 导入的字体文件 */
+    src: url("./res/font/ChillReunion_65S.otf");
+}
+
+@font-face {
+    font-family: shFont;
+    /* 导入的字体文件 */
+    src: url("./res/font/SourceHanSansSC-Bold.otf");
+}
+
+@font-face {
+    font-family: rxxxtFont;
+    /* 导入的字体文件 */
+    src: url("./res/font/日系小熊可爱体 Regular.ttf");
+}
+
+@font-face {
+    font-family: kcytFont;
+    /* 导入的字体文件 */
+    src: url("./res/font/江城圆体 700W.ttf");
+}
+
+@font-face {
+    font-family: yshsFont;
+    /* 导入的字体文件 */
+    src: url("/resources/font/YSHaoShenTi-2.ttf");
+}
+
+body {
+    position: absolute;
+    left: -8px;
+    top: -8px;
+}
+
+.wrapper{
+    height: 926px;
+    width: 465px;
+    background-color: #FBE4E4;
+    position: relative;
+    font-family: 'cr105Font'
+}
+
+.avatar {
+    height: 120px;
+    width: 120px;
+    border-radius: 50%;
+    margin-top: 38px;
+    margin-left: 40px;
+}
+
+.avatar-img {
+    height: 120px;
+    width: 120px;
+    border-radius: 50%;
+}
+
+.top-head {
+    width: 100%;
+    height: 179px;
+    color: #D37B8D;
+}
+
+.nickname {
+    margin-top: 43px;
+    margin-left: 30px;
+    font-size: 47px;
+}
+
+.uid {
+    font-size: 21px;
+    position: absolute;
+    width: 255px;
+    top: 84px;
+    left: 30px;
+    font-family: 'cr95Font'
+}
+
+.rl-img {
+    height: 90px;
+    width: 90px;
+    position: absolute;
+    top: 27px;
+    left: 30px;
+}
+
+.zx-img {
+    height:238px;
+    width: 120px;
+    left: 306px;
+    position: absolute;
+    z-index: 999;
+}
+
+.text-day {
+    font-size: 25px;
+    margin-left: 130px;
+    margin-top: 46px;
+    font-family: 'shFont';
+}
+
+.text-zx {
+    font-family: 'cr65sFont';
+    position: absolute;
+    top: 72px;
+    left: 130px;
+}
+
+.sign-content{
+    width: 100%;
+    height: 160px;
+    position: relative;
+}
+
+.sign-top {
+    background-color: #D47E8F;
+    width:445px;
+    height: 150px;
+    position: absolute;
+    left: 9px;
+    color: #FBE4E4;
+}
+
+.sign-bottom {
+    background-color: #953B50;
+    width: 445px;
+    height: 150px;
+    position: absolute;
+    top: 10px;
+    left: 15px
+}
+
+.qian {
+    position: absolute;
+    left: 15px;
+    top: 16px;
+    height: 132px;
+}
+
+.sign-data{
+    width: 100%;
+    height: 207px;
+    font-family: 'kcytFont';
+    position: relative;
+    color: #D47E8F;
+}
+
+.today-text {
+    font-size: 50px;
+    position: absolute;
+    top: -40px;
+    left: 130px;
+}
+
+.abs-text {
+    position: absolute;
+    font-size: 30px;
+    z-index: 2;
+    width: 465px;
+}
+
+.gift {
+    text-align: center;
+    /* float: left; */
+    /* margin-top: 150px; */
+}
+
+
+
+.sign-text {
+    font-size: 30px;
+    position: absolute;
+    top: 60px;
+    left: 140px;
+}
+
+.sign-num {
+    font-size: 30px;
+    position: absolute;
+    top: 60px;
+}
+
+.line {
+    background-color: #D1778A;
+    width: 435px;
+    height: 3px;
+    margin-left: 15px;
+}
+.bottom-foot{
+    width: 100%;
+    height: 376px;
+    position: relative;
+    font-family: 'rxxxtFont';
+    color: #D47E8F;
+}
+
+.heart-list {
+    position: absolute;
+    top: 76px;
+    left: 15px;
+    width: 435px;
+}
+
+.heart-img {
+    height: 30px;
+    width: 30px;
+}
+
+.cur-text {
+    font-size: 32px;
+    left: 10px;
+    top: -21px;
+    position: absolute;
+}
+
+.bot-text {
+    font-size: 30px;
+    position: absolute;
+    top: 85px;
+    left: 15px;
+    width: 435px;
+}
+
+.progress-border {
+    position: absolute;
+    top: 273px;
+    left: 19px;
+    width: 313px;
+    height: 30px;
+    border: #DF9DA8 1px solid;
+}
+.progress-bar {
+    height: 30px;
+    background-color: #D47E8F;
+}
+
+.weather-img {
+    width: 70px;
+    height: 70px;
+    position: absolute;
+    top: 37px;
+    left: 371px;
+}
+
+.mbl-img {
+    width: 132px;
+    height: 164px;
+    position: absolute;
+    top: 145px;
+    left: 333px;
+}
+
+.wd{
+    position: absolute;
+    font-size: 35px;
+    top: 60px;
+    left: 377px;
+}
+
+.date {
+    position: absolute;
+    font-size: 20px;
+    top: 350px;
+    left: 260px;
+    font-family: 'yshsFont';
+}

resources/template/sign/main.html

@@ -0,0 +1,78 @@
+
+</html>
+<!DOCTYPE html>
+<html lang="zh-cn">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test</title>
+    <!-- <link rel="stylesheet" href="./res/font-awesome/css/font-awesome.min.css"> -->
+    <link rel="stylesheet" href="main.css">
+</head>
+<body>
+    <div class="wrapper">
+        <div class="top-head">
+            <div style="display: flex;">
+                <div class="avatar">
+                    <img class="avatar-img" src="{{data.ava}}" alt="">
+                </div>
+                <div style="position: relative;">
+                    <p class="nickname">{{data.name}}</p>
+                    <p class="uid">UID:{{data.uid}}</p>
+                </div>
+            </div>
+        </div>
+        <div class="sign-content">
+            <div class="sign-bottom">
+            </div>
+            <div class="sign-top">
+                <img class="rl-img" class="avatar-img" src="res/img/rl.png" alt="">
+                <img class="zx-img" class="avatar-img" src="res/img/1.png" alt="">
+                <p class="text-day">累计签到{{data.sign_count}}天</p>
+                <p class="text-zx">真寻说: {{data.message}}</p>
+            </div>
+        </div>
+        <div class="sign-data">
+            <img class="qian" src="res/img/3.png" alt="">
+            <p class="today-text">今日签到</p>
+            <div class="abs-text" style="top: 42px;">
+                <p class="gift">{{data.impression}}</p>
+            </div>
+            <div class="abs-text" style="top: 83px;">
+                <p class="gift">{{data.gold}}</p></div>
+             <div class="abs-text" style="top: 123px;">
+                <p class="gift">{{data.gift}}</p>
+             </div>
+        </div>
+        <div class="line"></div>
+        <div class="bottom-foot">
+            <p class="cur-text">当前好感度: {{data.cur_impression}}</p>
+            <div class="heart-list">
+                {% for i in data.heart2 %}
+                    <img class="heart-img" src="res/img/h2.png" alt=""/>
+                {% endfor %}
+                {% for i in data.heart1 %}
+                    <img class="heart-img" src="res/img/h1.png" alt=""/>
+                {% endfor %}
+            </div>
+            <div class="bot-text">
+                <p style="position: absolute; top: 9px">好感度等级: {{data.level}}</p>
+                <p style="position: absolute; top: 58px">小真寻对你的态度: {{data.attitude}}</p>
+                <p style="position: absolute; top: 111px"">距离升级还差{{data.interpolation}}好感度</p>
+            </div>
+            <div class="progress-border">
+                <div class="progress-bar" style="width: {{ data.process }}%;"></div>
+            </div>
+            <img class="weather-img" src="res/img/weather/0.png" alt="">
+            <p class="wd" >28℃</p>
+            <img class="mbl-img" src="res/img/2.png" alt="">
+            <div class="date">
+                {{data.date}}
+            </div>
+        </div>
+    </div>
+</body>
+<script type="text/javascript" src="main.js">
+</script>
+</html>

resources/template/sign/main.js

@@ -0,0 +1,17 @@
+let wdDom = document.querySelector(".wd")
+
+let wd = Math.floor(Math.random() * 40) + 1
+
+wdDom.innerHTML = wd + "℃"
+
+let weatherDom = document.querySelector(".weather-img")
+
+let r = Math.floor(Math.random() * 12)
+
+weatherDom.src = "res/img/weather/" + r + ".png"
+
+let qianDom = document.querySelector(".qian")
+
+let r1 = Math.floor(Math.random() * 6)
+
+qianDom.src = "res/img/tag/" + r1 + ".png"