文档

Mocha使用好帮手

gift(领取礼包模块)

作者：kevinhehe
版本：v.1
依赖：mocha.css

点击运行Demo

样式1-1行1个 .mocha-gift-scheme1


1
2
3
4
5
6
7
8
9
10
11
<div class="mocha-gift mocha-gift-scheme1 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式2-1行2个 .mocha-gift-scheme2


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="mocha-gift mocha-gift-scheme2 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式3-1行3个 .mocha-gift-scheme3


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="mocha-gift mocha-gift-scheme3 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式4-1行4个 .mocha-gift-scheme4


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<div class="mocha-gift mocha-gift-scheme4 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
            <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
        </li>
    </ul>
</div>

样式5-上图下字和一按钮 ,.mocha-gift-scheme1~3控制每行显示礼包的数量 (1到3个)，.mocha-gift-scheme5控制的是上图下字。以上图为例，需添加.mocha-gift-scheme3+.mocha-gift-scheme5方可实现。

  • 礼品礼品礼品礼品礼品礼品x1

  • 礼品x1

  • 礼品x1

  • 礼品x1

  • 礼品x1

  • 礼品x1

领取礼包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div class="mocha-gift mocha-gift-scheme3 mocha-gift-scheme5 mocha-gift-skin1">
    <ul>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品礼品礼品礼品礼品礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
    </ul>
    <a href="javascript:;" class="mocha-gift-btn">领取礼包</a>
</div>

样式6-礼包签到,在样式4的基础上对li添加类名.act为当前标识样式，对按钮添加类名.mocha-gift-btn-disabled为按钮灰化样式。

  • 第一天

    礼品礼品礼品礼品礼品礼品x1

  • 第二天

    礼品x1

  • 第三天

    礼品x1

  • 第四天

    礼品x1

  • 第五天

    礼品x1

领取礼包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="mocha-gift mocha-gift-scheme3 mocha-gift-scheme5 mocha-gift-skin1">
    <ul>
        <li class="act">
            <p>第一天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品礼品礼品礼品礼品礼品x1</p>
        </li>
        <li class="act">
            <p>第二天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <p>第三天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <p>第四天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
        <li>
            <p>第五天</p>
            <div class="mocha-gift-box">
                <img src="http://dummyimage.com/290x107/000/fff" width="100%" height="100%" alt="">
            </div>
            <p>礼品x1</p>
        </li>
    </ul>
    <a href="javascript:;" class="mocha-gift-btn mocha-gift-btn-disabled">领取礼包</a>
</div>

修改模块皮肤CSS

模块的默认皮肤类.mocha-gift-skin1，您可以在您项目的page.css里修改.mocha-gift-skin1皮肤类，或者新增.mocha-gift-skin2。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* skin */
.mocha-gift-scheme1 li{width: 100%;}
.mocha-gift-scheme1 li:last-child{margin-right: 0;}
.mocha-gift-scheme2 li{width: 48.25%;}
.mocha-gift-scheme2 li:nth-child(even){margin-right: 0;}
.mocha-gift-scheme3 li{width: 31%;}
.mocha-gift-scheme3 li:nth-child(3n){margin-right: 0;}
.mocha-gift-scheme4 p{display: block;}
/* skin */
.mocha-gift-skin1{font-size: .16rem;}
.mocha-gift-skin1 p{font-size: .12rem;}
.mocha-gift-skin1 .mocha-gift-btn{font-size: .16rem;color: #fff;background-color: #04BE02;}
.mocha-gift-skin1 .mocha-gift-btn-disabled{background-color: #717171;}