常用代码

README.md

 ## BEST-CODE
 
+#### 常用样式及动画参考src目录下res.less
+
+#### 常用链接
+
+**奖品页详情跳转：/aaw/projectx/takePrize?projectOrderNo=${id}**
+
+#### 常用代码
+
+**活动规则：components下activityRules**
+
+#### 常用组件
+
 **圆形转盘：CircleTurntableDemo**
 

src/components/activityRules/activityRules.jsx

+"use strict";
+
+import React from "react";
+import { observer } from "mobx-react";
+import "./activityRules.less";
+import store from "@src/store";
+import { _throttle } from "@src/utils/utils";
+import modalStore from "@src/store/modal";
+
+@observer
+class ActivityRules extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    async componentDidMount() {
+        await store.initRule();
+    }
+    render() {
+        const { ruleInfo } = store;
+        return (
+            <div className="activityRules">
+                <span className="bg21"></span>
+                <span
+                    className="activityRulesCopyLive"
+                    dangerouslySetInnerHTML={{
+                        __html: ruleInfo,
+                    }}
+                ></span>
+                <span className="closeButton20" onClick = {_throttle(()=>{
+                  modalStore.closePop("ActivityRules")
+                })}></span>
+            </div>
+        );
+    }
+}
+export default ActivityRules;

src/components/activityRules/activityRules.less

+@import "../../res.less";
+.activityRules {
+    width: 582px;
+    height: 868px;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    position: absolute;
+    .bg21 {
+        width: 573px;
+        height: 791px;
+        left: 0px;
+        top: 77px;
+        position: absolute;
+        .sparkBg("活动规则/bg21.png");
+    }
+    .activityRulesCopyLive::-webkit-scrollbar {
+        display: none;
+    }
+    .activityRulesCopyLive {
+        width: 476px;
+        height: 569px;
+        left: 53px;
+        top: 217px;
+        position: absolute;
+        font-size: 24px;
+        color: rgba(68, 67, 66, 1);
+        overflow-x: hidden;
+        overflow-y: scroll;
+    }
+    .closeButton20 {
+        width: 49px;
+        height: 49px;
+        left: 533px;
+        top: 0px;
+        position: absolute;
+        opacity: 0.7;
+        .sparkBg("活动规则/关闭按钮20.png");
+    }
+}

src/res.less

-@RES_PATH: '/src/assets/';
-@webp: '?x-oss-process=image/format,webp';
+@RES_PATH: "/src/assets/";
+@webp: "?x-oss-process=image/format,webp";
 .sparkBg(@value) {
   background: url("@{RES_PATH}@{value}") no-repeat top left / 100% 100%;
 }
 
-.webpBg(@value){
+.webpBg(@value) {
   .sparkBg("@{value}");
-  [duiba-webp='true'] & {
+  [duiba-webp="true"] & {
     .sparkBg("@{value}@{webp}");
   }
-}
+}
\ No newline at end of file
+
+// 活动规则
+.ruleStyle {
+  overflow-x: hidden;
+  overflow-y: scroll;
+  word-break: break-all;
+}
+
+
+// 超出隐藏
+.textOverflow() {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+// 多行显示省略号
+.overflow-hidden(@clamp:2) {
+  -webkit-box-orient: vertical; // 避免压缩后删除此行
+  -webkit-line-clamp: @clamp; // 显示省略号行数
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+
+// 隐藏滚动条
+.hideScrollbar() {
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}
+
+// 按钮、图片置灰
+.disabled(){
+  filter: grayscale(100%);
+}
+
+// 渐变色字体
+.text-colo(@color1,@color2){
+  background-image: linear-gradient(@color1,@color2);
+  background-clip: text;
+  color: transparent;
+}
+
+//按钮呼吸动效
+.btnBreathStyle(@s:2s) {
+  animation: btnBreathAni @s forwards infinite;
+}
+@keyframes btnBreathAni {
+  0% {
+    transform: scale(1);
+  }
+  25% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(1);
+  }
+  75% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// 弹窗缩放弹出
+.zoom() {
+  animation: scale 1s forwards;
+  @keyframes scale {
+    0% {
+      transform: translateY(-55%) scale(0);
+    }
+    80% {
+      transform: translateY(-55%) scale(1.05);
+    }
+    100% {
+      transform: translateY(-55%) scale(1);
+    }
+  }
+}
+
+//底部滑动进入
+.upShow() {
+  animation: upShowAni 1s forwards;
+}
+
+@keyframes upShowAni {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+// 旋转出现动效
+.rotateShow() {
+  animation: rotateAni 0.8s forwards;
+}
+
+@keyframes rotateAni {
+  0% {
+    transform: rotateY(0deg) scale(0);
+  }
+  100% {
+    transform: rotateY(360deg) scale(1);
+  }
+}