koishi-plugin-dew-bot 1.0.188

package/lib/html/css/body.css

@@ -0,0 +1,287 @@
+body {
+    margin: 0;
+    padding: 0;
+    width: 368px;
+    height: 624px;
+    overflow: hidden;
+    position: relative;
+    background-color: #F8F3EF;
+}
+
+#app {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #F6F0E5;
+}
+
+.bg-ui {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
+
+.body-show {
+    position: absolute;
+    top: 100px;
+    right: 10px;
+    width: 200px;
+    height: 300px;
+    rotate: 3deg;
+    z-index: 2;
+}
+
+.content {
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    height: 100%;
+    width: 100%;
+}
+
+.title {
+    font-size: 33px;
+    font-weight: bold;
+    color: #49453a;
+    text-align: center;
+    letter-spacing: 2px;
+    text-shadow: 1px 1px 2px #aaa;
+    margin: 0 auto;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0.8;
+    text-shadow: 1px 1px 2px #757575;
+}
+
+.title span {
+    font-size: 12px;
+    font-weight: bold;
+    color: #49453a;
+    text-align: center;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    opacity: 0.7;
+}
+
+.title-box {
+    width: 368px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 28px;
+}
+
+
+
+.total-power {
+    font-weight: bold;
+    margin: 5px 0 0 0;
+    display: inline-block;
+    padding-right: 3px;
+}
+
+.total-title {
+    background: #514f40;
+    color: #fff;
+    font-weight: bold;
+    font-size: 16px;
+    padding: 0 2px;
+}
+
+.power-value {
+    color: #d9534f;
+    font-size: 17px;
+}
+
+.attribute {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.progress-bar {
+    width: 100%;
+    margin: 0 auto;
+    height: 10px;
+    background-color: #c7c3b8;
+    position: relative;
+    opacity: 0.9;
+    border-radius: 5px;
+}
+
+.progress {
+    height: 100%;
+    background-color: #6d695e;
+    opacity: 0.8;
+    border-radius: 5px;
+}
+
+.value {
+    text-align: right;
+    font-size: 15px;
+    opacity: 0.9;
+}
+
+.key {
+    font-weight: bold;
+    font-size: 12px;
+    opacity: 0.8;
+}
+
+.attribute-item {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.w-0 {
+    width: 100%;
+}
+
+.w-1 {
+    width: 97%;
+}
+
+.w-2 {
+    width: 96%;
+}
+
+.w-3 {
+    width: 95%;
+}
+
+.w-4 {
+    width: 94%;
+}
+
+.w-5 {
+    width: 93%;
+}
+.slot-1 {
+    position: absolute;
+    top: 93px;
+    left: 37px;
+    width: 94px;
+    height: 19px;
+    rotate: 357deg;
+    display: flex;
+    align-items: center;
+    /* 垂直居中 */
+}
+
+.slot-1-text {
+    font-size: 14px;
+    font-weight: bold;
+    color: #2e261c;
+    opacity: 0.7;
+}
+
+.slot-2 {
+    position: absolute;
+    bottom: 30px;
+    left: 41px;
+    width: 141px;
+    height: 24px;
+    align-items: center;
+    text-align: left;
+    rotate: 353deg;
+}
+
+.slot-2-text {
+    font-size: 18px;
+    font-weight: bold;
+    color: #514d44;
+    line-height: 22px;
+    letter-spacing: -1px;
+    opacity: 0.8;
+}
+
+.slot-3 {
+    position: absolute;
+    top: 131px;
+    left: 13px;
+    width: 141px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    text-align: right;
+    justify-content: flex-end;
+    border-bottom: 1px solid #524f4796;
+}
+
+.slot-3-text {
+    font-size: 24px;
+    font-weight: bold;
+    color: #514d41;
+    letter-spacing: -1px;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.slot-4 {
+    color: #333;
+    position: absolute;
+    top: 160px;
+    left: 13px;
+    width: 141px;
+    font-weight: bold;
+}
+.solt-5 {
+    position: absolute;
+    top: 339px;
+    right: 16px;
+    rotate: 3deg;
+    width: 205px;
+    display: flex;
+    justify-content: center;
+    opacity: 0.8;
+}
+
+.solt-5 img {
+    max-width: 80%;
+    margin: 0;
+}
+
+.solt-6 {
+    position: absolute;
+    right: 15px;
+    top: 405px;
+    font-weight: bold;
+    width: 54%;
+}
+.solt-7 {
+    position: absolute;
+    right: 19px;
+    bottom: 76px;
+    font-weight: bold;
+    width: 336px;
+    font-size: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    overflow: hidden;
+    height: 39px;
+}
+.solt-7 span {
+    background: #1e90ff; 
+    color: #fffbf4d1;
+    border-radius: 4px;
+    font-size: 12px;
+    margin: 1px 2px;
+    padding: 0 2px;
+    text-align: center;
+    display: flex;
+    height: 21px;
+    align-items: center;
+    justify-content: center;
+}
+.solt-6 .power-value {
+    color: #6d695e;
+}

package/lib/html/css/equip.css

@@ -0,0 +1,115 @@
+body {
+    margin: 0;
+    padding: 0;
+    width: 400px;
+    overflow: hidden;
+    position: relative;
+    background-color: #F8F3EF;
+    min-height: 400px;
+}
+
+#app {
+    width: 95%;
+    border: 2px solid rgba(0, 0, 0, 0.2);
+    background-color: #F6F0E5;
+    border-radius: 5px;
+    margin: 10px auto;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.equip-iconBox {
+    /* 居中 */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    height: 150px;
+    /* 上下边距 */
+    margin-bottom: 10px;
+}
+
+.equip-icon-border {
+    width: 140px;
+    height: 140px;
+    position: absolute;
+    z-index: 1;
+}
+
+.equip-icon-quality {
+    width: 140px;
+    height: 140px;
+    position: absolute;
+    border-radius: 50%;
+    background: #3e455647;
+}
+
+.equip-icon {
+    width: 100px;
+    height: 100px;
+    /* 绝对居中 */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    /* 边框 */
+    border: 2px solid rgb(255 247 247 / 100%);
+}
+
+.equip-baseInfo {
+    height: 100%;
+    margin-left: 30px;
+    margin-right: 30px;
+    color: #3e4556;
+}
+
+.quality {
+    color: #FFAF52;
+    font-size: 24px;
+    letter-spacing: 9px;
+    text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
+    display: flex;
+    justify-content: space-around;
+    width: 100%;
+    align-items: center;
+}
+
+.equip-name {
+    text-align: center;
+    color: #50371D;
+    font-weight: bold;
+    font-size: 24px;
+    font-family: cursive;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.attribute {
+    background: #FFAF52;
+    border-radius: 5px;
+    color: white;
+    padding: 6px 10px;
+    margin-top: 10px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.attribute div {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.info-box {
+    margin-top: 10px;
+}
+
+.info-box-title {
+    font-size: 14px;
+    font-weight: bold;
+    color: #3E4556;
+    margin-bottom: 5px;
+}
+
+.info-box-content {
+    font-size: 14px;
+    color: #3E4556;
+}

package/lib/html/css/skill.css

@@ -0,0 +1,75 @@
+.filter {
+    filter: drop-shadow(rgba(0, 0, 0, 0.5) 4px 2.5px 6px);
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 406.5px;
+    height: 593.5px;
+    overflow: hidden;
+    position: relative;
+}
+
+.pos {
+    position: absolute;
+}
+
+.card-frame {
+    width: 406.5px;
+    height: 593.5px;
+}
+
+.card-name {
+    position: absolute;
+    top: 31px;
+    left: 37.5px;
+    font-size: 23px;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+
+.descArea {
+    width: 349.5px;
+    height: 112.5px;
+    bottom: 34.5px;
+    left: 28.5px;
+    overflow: hidden;
+}
+
+.content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    flex-direction: row;
+    position: relative;
+}
+
+.text-content {
+    font-size: 12px;
+    word-break: break-all;
+    white-space: normal;
+}
+
+.inline-icon {
+    display: inline-block;
+    vertical-align: top;
+    width: 15px;
+    height: 15px;
+    filter: drop-shadow(rgba(0, 0, 0, 0.5) 2px 1px 3px);
+}
+
+.pos[style*="width: 687px"] {
+    width: 343.5px !important;
+    overflow: hidden;
+}
+.bold{
+    font-weight: bold;
+}
+.split-line {
+    border-top: 1px solid #666;
+    margin: 1px 0;
+    width: 100%;
+}

package/lib/html/css/talent.css

@@ -0,0 +1,58 @@
+.filter {
+    filter: drop-shadow(rgba(0, 0, 0, 0.5) 4px 2.5px 6px);
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    width: 406.5px;
+    height: 593.5px;
+    overflow: hidden;
+    position: relative;
+}
+
+.pos {
+    position: absolute;
+}
+
+.card-frame {
+    width: 406.5px;
+    height: 593.5px;
+}
+
+.card-name {
+    position: absolute;
+    top: 32px;
+    left: 37.5px;
+    font-size: 21px;
+    font-weight: bold;
+    color: #ffffff;
+    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
+}
+
+.content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    flex-direction: row;
+}
+
+.text-content {
+    font-size: 10px;
+    word-break: break-all;
+    white-space: normal;
+}
+
+.inline-icon {
+    display: inline-block;
+    vertical-align: top;
+    width: 15px;
+    height: 15px;
+    filter: drop-shadow(rgba(0, 0, 0, 0.5) 2px 1px 3px);
+}
+
+.pos[style*="width: 687px"] {
+    width: 343.5px !important;
+    overflow: hidden;
+}

package/lib/html/page/body.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>角色属性</title>
+    <script src="../res/vue2.js"></script>
+    <link rel="stylesheet" href="../css/body.css">
+</head>
+
+<body>
+    <div id="app">
+        <img class="bg-ui" src="../res/body/box.png">
+        <img class="body-show" :src="data.show" onerror="this.onerror=null; this.src='../res/body/share/test.png'">
+        <div class="content">
+            <div class="title-box">
+                <h1 class="title"><span>◆</span>&nbsp;&nbsp;{{data.title}}&nbsp;&nbsp;<span>◆</span></h1>
+            </div>
+            <div class="slot-1">
+                <span class="slot-1-text">UID {{data.id}}</span>
+            </div>
+            <div class="slot-2">
+                <span class="slot-2-text">未开·基因锁</span>
+            </div>
+            <div class="slot-3">
+                <span class="slot-3-text">{{data.nickName}}</span>
+            </div>
+            <div class="slot-4">
+                <div class="total-power">
+                    <span class="total-title">战力</span>
+                    <span class="power-value">{{data.power}}</span>
+                </div>
+                <div v-for="(attribute, index) in data.attributes" :class="'attribute w-' + (index > 5 ? 5 : index)">
+                    <div class="attribute-item">
+                        <span class="key">{{attribute.key}}</span>
+                        <span class="value">{{attribute.val.toFixed(2)}}{{attribute.Percents ? '%' : ''}}</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress"
+                            :style="'width: ' + (attribute.val > 0 ? (Math.min(attribute.val / attribute.max, 1) * 100) : 0) + '%;'">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="solt-5">
+                <img src="../res/body/title/test.png">
+            </div>
+            <div class="solt-6">
+                <div class="total-power">
+                    <span class="total-title">Lv.等级</span>
+                    <span class="power-value">{{data.level}}</span>
+                </div>
+                <div class="attribute w-5">
+                    <div class="attribute-item">
+                        <span class="key">生命值</span>
+                        <span class="value">{{data.hp[0].toFixed(2)}}/{{data.hp[1].toFixed(2)}}</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress"
+                            :style="'width: ' + (data.hp[0] > 0 ? (Math.min(data.hp[0] / data.hp[1], 1) * 100) : 0) + '%; background-color: #ce0303;'">
+                        </div>
+                    </div>
+                    <div class="attribute-item">
+                        <span class="key">经验值</span>
+                        <span class="value">{{data.exp[0].toFixed(2)}}/{{data.exp[1].toFixed(2)}}</span>
+                    </div>
+                    <div class="progress-bar">
+                        <div class="progress"
+                            :style="'width: ' + (data.exp[0] > 0 ? (Math.min(data.exp[0] / data.exp[1], 1) * 100) : 0) + '%; background-color: #2196F3;'">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="solt-7">
+                <span v-for="talent in data.talent">{{talent}}</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        let data = {title:"宿主档案",show:"",power:400,id:"035",nickName:"匿名",level:1,attributes:[{key:"物理攻击",val:10,max:10,Percents:false}],hp:[100,100],exp:[0,10],talent:['???']};
+        new Vue({
+            el: '#app',
+            data: {
+                data: data
+            },
+            mounted() {
+                this.data = data;
+            },
+            methods: {
+
+            }
+        });
+    </script>
+
+</body>