新增音萌商店包

view/mew/activity/2022-newYear/css/friends.css

@@ -0,0 +1,169 @@
+html,
+body {
+  width: 100%;
+  background: #F4F4FA;
+}
+
+.back {
+  position: fixed;
+  top: 0.9333333333rem;
+  left: 0.4533333333rem;
+  z-index: 9;
+  width: 0.8266666667rem;
+  height: 0.8266666667rem;
+}
+.back img {
+  width: 100%;
+  height: 100%;
+}
+
+input {
+  width: 9.2rem;
+  height: 0.8533333333rem;
+  border-radius: 0.8533333333rem;
+  outline: none;
+  border: none;
+  background: #fff;
+  display: block;
+  margin: 2.5733333333rem auto 0.4266666667rem;
+  box-sizing: border-box;
+  padding: 0 0.44rem;
+}
+
+.title {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  text-align: center;
+  color: #482F2F;
+  font-size: 0.4533333333rem;
+  height: 2.08rem;
+  line-height: 2.6rem;
+  background: #fff;
+}
+
+ul {
+  width: 9.2rem;
+  height: 17rem;
+  margin: 0 auto 0;
+  overflow-y: scroll;
+}
+ul li {
+  width: 100%;
+  height: 1.4933333333rem;
+  margin-bottom: 0.4rem;
+}
+ul li .left {
+  width: 1.4933333333rem;
+  height: 1.4933333333rem;
+  border-radius: 50%;
+  float: left;
+}
+ul li .left img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #FF7489;
+}
+ul li .right {
+  float: right;
+  width: 7.2rem;
+  height: 100%;
+  border-bottom: 0.0133333333rem solid #E4E4E4;
+}
+ul li .right p {
+  font-size: 0.3733333333rem;
+  color: #171A58;
+  margin-top: 0.3066666667rem;
+  margin-bottom: 0.2rem;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+ul li .right span {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: #8A8CAB;
+  font-size: 0.32rem;
+}
+
+.confirmTheGift {
+  display: none;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  background: rgba(0, 0, 0, 0.8);
+}
+.confirmTheGift .confirmTheGift_in {
+  width: 8rem;
+  height: 5.6133333333rem;
+  background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
+  position: relative;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 0.5333333333rem;
+  box-sizing: border-box;
+}
+.confirmTheGift .confirmTheGift_in .confirmTheGift_in_title {
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 0.5333333333rem;
+  color: #990D39;
+  font-size: 0.3466666667rem;
+  font-weight: bold;
+}
+.confirmTheGift .confirmTheGift_in .confirmTheGift_in_title b {
+  color: #503938;
+  font-weight: bold;
+}
+.confirmTheGift .confirmTheGift_in .confirmTheGift_in_title i {
+  font-style: normal;
+  font-weight: bold;
+}
+.confirmTheGift .confirmTheGift_in .gift {
+  width: 2.1333333333rem;
+  height: 2.1333333333rem;
+  background: #FFADB7;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 1.48rem;
+}
+.confirmTheGift .confirmTheGift_in .but1 {
+  text-align: center;
+  color: #482F2F;
+  font-size: 0.3733333333rem;
+  font-weight: bold;
+  line-height: 0.96rem;
+  width: 2.9333333333rem;
+  height: 0.96rem;
+  border-radius: 0.96rem;
+  position: absolute;
+  left: 0.8rem;
+  top: 4.2133333333rem;
+  background: #fff;
+}
+.confirmTheGift .confirmTheGift_in .but2 {
+  width: 2.9333333333rem;
+  height: 0.96rem;
+  position: absolute;
+  right: 0.8rem;
+  top: 4.2133333333rem;
+  background: url(../images/confirmTheGift_in_but2.png) no-repeat;
+  background-size: 100% 100%;
+}
+
+/*# sourceMappingURL=friends.css.map */

view/mew/activity/2022-newYear/css/friends.scss

@@ -0,0 +1,187 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+html,
+body {
+    width: 100%;
+    // height: 100%;
+    background: #F4F4FA;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70, );
+    left: px2rem(34, );
+    z-index: 9;
+    width: px2rem(62, );
+    height: px2rem(62, );
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+input {
+    width: px2rem(690, );
+    height: px2rem(64, );
+    border-radius: px2rem(64, );
+    outline: none;
+    border: none;
+    background: #fff;
+    display: block;
+    margin: px2rem(193, ) auto px2rem(32, );
+    box-sizing: border-box;
+    padding: 0 px2rem(33, );
+}
+
+.title {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #482F2F;
+    font-size: px2rem(34, );
+    height: px2rem(156, );
+    line-height: 2.6rem;
+    background: #fff;
+}
+
+ul {
+    width: px2rem(690, );
+    height: 17rem;
+    // background: pink;
+    margin: 0 auto 0;
+    overflow-y: scroll;
+
+    li {
+        width: 100%;
+        height: px2rem(112, );
+        margin-bottom: px2rem(30, );
+
+        .left {
+            width: px2rem(112, );
+            height: px2rem(112, );
+            border-radius: 50%;
+            float: left;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                background: #FF7489;
+            }
+        }
+
+        .right {
+            float: right;
+            width: 7.2rem;
+            height: 100%;
+            border-bottom: px2rem(1, ) solid #E4E4E4;
+
+            p {
+                font-size: px2rem(28, );
+                color: #171A58;
+                margin-top: px2rem(23, );
+                margin-bottom: px2rem(15, );
+                width: 100%;
+                overflow: hidden; //超出隐藏
+                white-space: nowrap; //不折行
+                text-overflow: ellipsis; //溢出显示省略号
+            }
+
+            span {
+                display: block;
+                width: 100%;
+                overflow: hidden; //超出隐藏
+                white-space: nowrap; //不折行
+                text-overflow: ellipsis; //溢出显示省略号
+                color: #8A8CAB;
+                font-size: px2rem(24, );
+            }
+        }
+    }
+}
+
+.confirmTheGift {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 999;
+    background: rgba(0, 0, 0, .8);
+
+    .confirmTheGift_in {
+        width: px2rem(600, );
+        height: px2rem(421, );
+        background: linear-gradient(90deg, #DAFFFC 0%, #FFFBE6 47%, #FFD5EC 100%);
+        position: relative;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: px2rem(40, );
+        box-sizing: border-box;
+
+        .confirmTheGift_in_title {
+            width: 100%;
+            text-align: center;
+            position: absolute;
+            left: 0;
+            top: px2rem(40, );
+            color: #990D39;
+            font-size: px2rem(26, );
+            font-weight: bold;
+
+            b {
+                color: #503938;
+                font-weight: bold;
+            }
+
+            i {
+                font-style: normal;
+                font-weight: bold;
+            }
+        }
+
+        .gift {
+            width: px2rem(160, );
+            height: px2rem(160, );
+            background: #FFADB7;
+            border-radius: 50%;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: px2rem(111, );
+        }
+
+        .but1 {
+            text-align: center;
+            color: #482F2F;
+            font-size: px2rem(28, );
+            font-weight: bold;
+            line-height: px2rem(72, );
+            width: px2rem(220, );
+            height: px2rem(72, );
+            border-radius: px2rem(72, );
+            position: absolute;
+            left: px2rem(60, );
+            top: px2rem(316, );
+            background: #fff;
+        }
+
+        .but2 {
+            width: px2rem(220, );
+            height: px2rem(72, );
+            position: absolute;
+            right: px2rem(60, );
+            top: px2rem(316, );
+            background: url(../images/confirmTheGift_in_but2.png) no-repeat;
+            background-size: 100% 100%;
+        }
+    }
+}

view/mew/activity/2022-newYear/css/share.css

@@ -0,0 +1,24 @@
+html,
+body {
+  width: 100%;
+  height: 21.6533333333rem;
+  background-color: #BDADFF;
+  background-image: url(../images/shareBg.png);
+  background-size: 100% 21.6533333333rem;
+  background-repeat: no-repeat;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+}
+html img,
+body img {
+  position: absolute;
+  width: 3.3466666667rem;
+  height: 3.3466666667rem;
+  border-radius: 50%;
+  top: 8.8rem;
+  left: 3.8933333333rem;
+}
+
+/*# sourceMappingURL=share.css.map */

view/mew/activity/2022-newYear/css/share.scss

@@ -0,0 +1,26 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+html,
+body {
+    width: 100%;
+    height: px2rem(1624, );
+    background-color: #BDADFF;
+    background-image: url(../images/shareBg.png);
+    background-size: 100% px2rem(1624, );
+    background-repeat: no-repeat;
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    top: 0;
+
+    img {
+        position: absolute;
+        width: px2rem(251, );
+        height: px2rem(251, );
+        border-radius: 50%;
+        top: px2rem(660, );
+        left: px2rem(292, );
+    }
+}

view/mew/activity/2022-newYear/friends.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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>好友</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="../../common/css/swiper.min.css">
+    <link rel="stylesheet" href="./css/friends.css">
+</head>
+
+<body>
+    <!-- 顶部返回 -->
+    <div class="back"><img src="./images/travel/back.png" alt=""></div>
+    <div class="title">好友</div>
+    <input type="text" placeholder="搜索好友">
+    <ul>
+        <!-- <li uid="936887">
+            <div class="left">
+                <img src="./images/people.png" alt="">
+            </div>
+            <div class="right">
+                <p>用户昵称1</p>
+                <span>你好啊，好久不见是吧，不见就不见不见就不见不不见不不见不不见不不见不不见不</span>
+            </div>
+        </li> -->
+    </ul>
+    <!-- 确定赠送按钮 -->
+    <div class="confirmTheGift">
+        <div class="confirmTheGift_in">
+            <p class="confirmTheGift_in_title">确定赠送“<b>用户昵称</b>”一张 <i>礼物昵称</i> 愿望卡吗?</p>
+            <img src="" alt="" class="gift">
+            <div class="but1">取消</div>
+            <div class="but2"></div>
+        </div>
+    </div>
+</body>
+
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="../../common/js/svga.min.js"></script>
+<script src="../../common/js/swiper.min.js"></script>
+<script src="./js/friends.js"></script>
+
+</html>