新增礼物墙规则

2024-01-30 15:27:42 +08:00
parent b665c9604e
commit 4a7593607d
4 changed files with 99 additions and 0 deletions
--- a/view/yinmeng/modules/rule/giftWallRule.html
+++ b/view/yinmeng/modules/rule/giftWallRule.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>礼物墙等级说明</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="../../common/css/flex.css">
+    <link rel="stylesheet" href="./style/giftWallRule.css">
+    
+</head>
+<body>
+    <ul>
+        <li><span></span>本App内的全部礼物，将根据价值以及稀有程度进行礼物分级</li>
+        <li><span></span>不同礼物等级将有不同的展示方式，具体信息展示在收集的礼物墙内</li>
+        <li><span></span>具体礼物等级说明如下：</li>
+    </ul>
+    <img src="./images/giftWallRule.png" alt="" srcset="">
+</body>
+<script src="../../common/js/flexible.js"></script>
+</html>
--- a/view/yinmeng/modules/rule/images/giftWallRule.png
+++ b/view/yinmeng/modules/rule/images/giftWallRule.png
--- a/view/yinmeng/modules/rule/style/giftWallRule.css
+++ b/view/yinmeng/modules/rule/style/giftWallRule.css
@@ -0,0 +1,37 @@
+html,
+body {
+  background: #F8F8FB;
+}
+
+ul {
+  width: 8.45333rem;
+  margin: 0.85333rem auto 0;
+  font-weight: 400;
+  font-family: PingFangSC, PingFang SC;
+}
+
+ul li {
+  width: 100%;
+  position: relative;
+  margin-bottom: 0.53333rem;
+  color: #2B2D33;
+  font-size: 0.37333rem;
+  line-height: 0.5rem;
+  transform: translateX(5);
+}
+
+ul li span {
+  position: absolute;
+  width: 0.13333rem;
+  height: 0.26667rem;
+  top: 0.1rem;
+  left: -0.26667rem;
+  background: #FFDA24;
+  border-radius: 0.08rem;
+}
+
+img {
+  width: 10rem;
+  display: block;
+  margin-bottom: 0.26667rem;
+}
--- a/view/yinmeng/modules/rule/style/giftWallRule.scss
+++ b/view/yinmeng/modules/rule/style/giftWallRule.scss
@@ -0,0 +1,41 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    background: #F8F8FB;
+}
+
+ul {
+    width: px2rem(634);
+    margin: px2rem(64) auto 0;
+    font-weight: 400;
+    font-family: PingFangSC, PingFang SC;
+
+    li {
+        width: 100%;
+        position: relative;
+        margin-bottom: px2rem(40);
+        color: #2B2D33;
+        font-size: px2rem(28);
+        line-height: 0.5rem;
+        transform: translateX(5);
+
+        span {
+            position: absolute;
+            width: px2rem(10);
+            height: px2rem(20);
+            top: px2rem(7.5);
+            left: px2rem(-20);
+            background: #FFDA24;
+            border-radius: px2rem(6);
+        }
+    }
+}
+
+img {
+    width: px2rem(750);
+    display: block;
+    margin-bottom: px2rem(20);
+}