diff --git a/view/peko/modules/luckyTarot/css/index.css b/view/peko/modules/luckyTarot/css/index.css
new file mode 100644
index 0000000..ec99f2a
--- /dev/null
+++ b/view/peko/modules/luckyTarot/css/index.css
@@ -0,0 +1,214 @@
+html,
+body {
+  width: 100%;
+  height: 21.6533333333rem;
+  background: url(../images/bg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+  position: relative;
+  overflow: hidden;
+}
+
+.back {
+  position: fixed;
+  top: 0.9333333333rem;
+  left: 0.4533333333rem;
+  z-index: 9999;
+  width: 0.8266666667rem;
+  height: 0.8266666667rem;
+}
+.back img {
+  width: 100%;
+  height: 100%;
+}
+.back p {
+  color: #fff;
+  font-size: 0.4266666667rem;
+  position: absolute;
+  width: 9rem;
+  left: 0;
+  top: 0;
+  height: 100%;
+  text-align: center;
+  line-height: 0.8266666667rem;
+}
+
+.header {
+  width: 9.12rem;
+  height: 3.04rem;
+  margin: 2.0933333333rem auto 0rem;
+  display: block;
+}
+
+.gold_10 {
+  width: 6.4266666667rem;
+  height: 0.6933333333rem;
+  margin: 0rem auto 0.2666666667rem;
+  display: block;
+}
+
+.rule {
+  width: 0.68rem;
+  height: 1.8666666667rem;
+  background: url(../images/icon.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 2.8133333333rem;
+  right: 0;
+  color: #FFE7A9;
+  font-size: 0.2933333333rem;
+  text-align: center;
+  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  box-sizing: border-box;
+}
+
+.record {
+  width: 0.68rem;
+  height: 1.8666666667rem;
+  background: url(../images/icon.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 4.8533333333rem;
+  right: 0;
+  color: #FFE7A9;
+  font-size: 0.2933333333rem;
+  text-align: center;
+  padding: 0.3333333333rem 0.1333333333rem 0.3066666667rem 0.2666666667rem;
+  box-sizing: border-box;
+}
+
+.tarotBox {
+  width: 9.8266666667rem;
+  height: 14.1333333333rem;
+  background: url(../images/middleBg.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+.tarotBox .tabBox {
+  width: 9.56rem;
+  height: 1.3066666667rem;
+  line-height: 1.3066666667rem;
+  display: flex;
+  justify-content: space-between;
+  background: url(../images/tabBox.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto;
+}
+.tarotBox .tabBox div {
+  width: 3.3733333333rem;
+  height: 100%;
+  color: #FEF0C0;
+  font-size: 0.4266666667rem;
+  text-align: center;
+}
+.tarotBox .tabBox .active1 {
+  background: url(../images/active1.png) no-repeat;
+  background-size: 100% 100%;
+  color: #FFFFFF;
+}
+.tarotBox .gradeText {
+  position: absolute;
+  left: 0.9866666667rem;
+  top: 1.4666666667rem;
+  color: #FFEAA9;
+  font-size: 0.32rem;
+}
+.tarotBox .diamond {
+  min-width: 1.9733333333rem;
+  height: 0.5866666667rem;
+  border-radius: 0.5866666667rem;
+  line-height: 0.5866666667rem;
+  position: absolute;
+  right: 0.96rem;
+  top: 1.28rem;
+  background: #343662;
+  color: #FFFFFF;
+  border: 0.0133333333rem solid #FFF3B1;
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+.tarotBox .diamond .diamondIcon {
+  display: inline-block;
+  width: 0.3866666667rem;
+  height: 0.28rem;
+  margin-top: 0.16rem;
+  margin-left: 0.1733333333rem;
+}
+.tarotBox .diamond b {
+  font-size: 0.2666666667rem;
+  display: inline-block;
+  margin: 0 0.0933333333rem;
+}
+.tarotBox .diamond .add {
+  width: 0.24rem;
+  height: 0.24rem;
+  display: inline-block;
+  margin-top: 0.1733333333rem;
+  margin-right: 0.1866666667rem;
+}
+.tarotBox .cardBox {
+  width: 1.9733333333rem;
+  height: 3.2133333333rem;
+  position: absolute;
+  background: url(../images/card.png) no-repeat;
+  background-size: 100% 100%;
+}
+.tarotBox .cardBox0 {
+  left: 0.9466666667rem;
+  top: 2.0933333333rem;
+}
+.tarotBox .cardBox1 {
+  left: 2.9866666667rem;
+  top: 2.0933333333rem;
+}
+.tarotBox .cardBox2 {
+  left: 5.04rem;
+  top: 2.0933333333rem;
+}
+.tarotBox .cardBox3 {
+  left: 7.08rem;
+  top: 2.0933333333rem;
+}
+.tarotBox .cardBox4 {
+  left: 7.08rem;
+  top: 5.52rem;
+}
+.tarotBox .cardBox5 {
+  left: 7.08rem;
+  top: 8.8533333333rem;
+}
+.tarotBox .cardBox6 {
+  left: 5.04rem;
+  top: 8.8533333333rem;
+}
+.tarotBox .cardBox7 {
+  left: 2.9866666667rem;
+  top: 8.8533333333rem;
+}
+.tarotBox .cardBox8 {
+  left: 0.9466666667rem;
+  top: 8.8533333333rem;
+}
+.tarotBox .cardBox9 {
+  left: 0.9466666667rem;
+  top: 5.52rem;
+}
+.tarotBox .but {
+  width: 2.5333333333rem;
+  height: 1.0133333333rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 7.32rem;
+}
+
+h3 {
+  width: 100%;
+  margin-bottom: 0.16rem;
+  color: #D7D9F7;
+  font-size: 0.24rem;
+  text-align: center;
+}
+
+/*# sourceMappingURL=index.css.map */
diff --git a/view/peko/modules/luckyTarot/css/index.scss b/view/peko/modules/luckyTarot/css/index.scss
new file mode 100644
index 0000000..03b4880
--- /dev/null
+++ b/view/peko/modules/luckyTarot/css/index.scss
@@ -0,0 +1,238 @@
+@function px2rem($px, $rem:75) {
+    @return $px / $rem+rem;
+}
+
+html,
+body {
+    width: 100%;
+    height: px2rem(1624, );
+    background: url(../images/bg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto;
+    position: relative;
+    overflow: hidden;
+}
+
+.back {
+    position: fixed;
+    top: px2rem(70, );
+    left: px2rem(34, );
+    z-index: 9999;
+    width: px2rem(62, );
+    height: px2rem(62, );
+
+    img {
+        width: 100%;
+        height: 100%;
+    }
+
+    p {
+        color: #fff;
+        font-size: px2rem(32, );
+        position: absolute;
+        width: 9rem;
+        left: 0;
+        top: 0;
+        height: 100%;
+        text-align: center;
+        line-height: px2rem(62, );
+    }
+}
+
+.header {
+    width: px2rem(684, );
+    height: px2rem(228, );
+    margin: px2rem(157, ) auto px2rem(0, );
+    display: block;
+}
+
+.gold_10 {
+    width: px2rem(482, );
+    height: px2rem(52, );
+    margin: px2rem(0, ) auto px2rem(20, );
+    display: block;
+}
+
+.rule {
+    width: px2rem(51, );
+    height: px2rem(140, );
+    background: url(../images/icon.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: px2rem(211, );
+    right: 0;
+    color: #FFE7A9;
+    font-size: px2rem(22, );
+    text-align: center;
+    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    box-sizing: border-box;
+}
+
+.record {
+    width: px2rem(51, );
+    height: px2rem(140, );
+    background: url(../images/icon.png) no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    top: px2rem(364, );
+    right: 0;
+    color: #FFE7A9;
+    font-size: px2rem(22, );
+    text-align: center;
+    padding: px2rem(25, ) px2rem(10, ) px2rem(23, ) px2rem(20, );
+    box-sizing: border-box;
+}
+
+.tarotBox {
+    width: px2rem(737, );
+    height: px2rem(1060, );
+    background: url(../images/middleBg.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+
+    .tabBox {
+        width: px2rem(717, );
+        height: px2rem(98, );
+        line-height: px2rem(98, );
+        display: flex;
+        justify-content: space-between;
+        background: url(../images/tabBox.png) no-repeat;
+        background-size: 100% 100%;
+        margin: 0 auto;
+
+        div {
+            width: px2rem(253, );
+            height: 100%;
+            color: #FEF0C0;
+            font-size: px2rem(32, );
+            text-align: center;
+        }
+
+        .active1 {
+            background: url(../images/active1.png) no-repeat;
+            background-size: 100% 100%;
+            color: #FFFFFF;
+        }
+    }
+
+    .gradeText {
+        position: absolute;
+        left: px2rem(74, );
+        top: px2rem(110, );
+        color: #FFEAA9;
+        font-size: px2rem(24, );
+    }
+
+    .diamond {
+        min-width: px2rem(148, );
+        height: px2rem(44, );
+        border-radius: px2rem(44, );
+        line-height: px2rem(44, );
+        position: absolute;
+        right: px2rem(72, );
+        top: px2rem(96, );
+        background: #343662;
+        color: #FFFFFF;
+        border: px2rem(1, ) solid #FFF3B1;
+        box-sizing: border-box;
+        vertical-align: middle;
+
+        .diamondIcon {
+            display: inline-block;
+            width: px2rem(29, );
+            height: px2rem(21, );
+            margin-top: px2rem(12, );
+            margin-left: px2rem(13, );
+        }
+
+        b {
+            font-size: px2rem(20, );
+            display: inline-block;
+            margin: 0 px2rem(7, );
+        }
+
+        .add {
+            width: px2rem(18, );
+            height: px2rem(18, );
+            display: inline-block;
+            margin-top: px2rem(13, );
+            margin-right: px2rem(14, );
+        }
+    }
+
+    .cardBox {
+        width: px2rem(148, );
+        height: px2rem(241, );
+        position: absolute;
+        background: url(../images/card.png) no-repeat;
+        background-size: 100% 100%;
+    }
+
+    .cardBox0 {
+        left: px2rem(71, );
+        top: px2rem(157, );
+    }
+
+    .cardBox1 {
+        left: px2rem(224, );
+        top: px2rem(157, );
+    }
+
+    .cardBox2 {
+        left: px2rem(378, );
+        top: px2rem(157, );
+    }
+
+    .cardBox3 {
+        left: px2rem(531, );
+        top: px2rem(157, );
+    }
+
+    .cardBox4 {
+        left: px2rem(531, );
+        top: px2rem(414, );
+    }
+
+    .cardBox5 {
+        left: px2rem(531, );
+        top: px2rem(664, );
+    }
+
+    .cardBox6 {
+        left: px2rem(378, );
+        top: px2rem(664, );
+    }
+
+    .cardBox7 {
+        left: px2rem(224, );
+        top: px2rem(664, );
+    }
+
+    .cardBox8 {
+        left: px2rem(71, );
+        top: px2rem(664, );
+    }
+
+    .cardBox9 {
+        left: px2rem(71, );
+        top: px2rem(414, );
+    }
+
+    .but{
+        width: px2rem(190, );
+        height: px2rem(76, );
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: px2rem(549, );
+    }
+}
+
+h3 {
+    width: 100%;
+    margin-bottom: px2rem(12, );
+    color: #D7D9F7;
+    font-size: px2rem(18, );
+    text-align: center;
+}
\ No newline at end of file
diff --git a/view/peko/modules/luckyTarot/images/10Gold.png b/view/peko/modules/luckyTarot/images/10Gold.png
new file mode 100644
index 0000000..712be52
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/10Gold.png differ
diff --git a/view/peko/modules/luckyTarot/images/active1.png b/view/peko/modules/luckyTarot/images/active1.png
new file mode 100644
index 0000000..30b2610
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/active1.png differ
diff --git a/view/peko/modules/luckyTarot/images/add.png b/view/peko/modules/luckyTarot/images/add.png
new file mode 100644
index 0000000..b01ff84
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/add.png differ
diff --git a/view/peko/modules/luckyTarot/images/bg.png b/view/peko/modules/luckyTarot/images/bg.png
new file mode 100644
index 0000000..876ccc4
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/bg.png differ
diff --git a/view/peko/modules/luckyTarot/images/but.png b/view/peko/modules/luckyTarot/images/but.png
new file mode 100644
index 0000000..721540f
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/but.png differ
diff --git a/view/peko/modules/luckyTarot/images/card.png b/view/peko/modules/luckyTarot/images/card.png
new file mode 100644
index 0000000..ec70aea
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/card.png differ
diff --git a/view/peko/modules/luckyTarot/images/diamond.png b/view/peko/modules/luckyTarot/images/diamond.png
new file mode 100644
index 0000000..4155abe
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/diamond.png differ
diff --git a/view/peko/modules/luckyTarot/images/header.png b/view/peko/modules/luckyTarot/images/header.png
new file mode 100644
index 0000000..29140e6
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/header.png differ
diff --git a/view/peko/modules/luckyTarot/images/icon.png b/view/peko/modules/luckyTarot/images/icon.png
new file mode 100644
index 0000000..4d9d502
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/icon.png differ
diff --git a/view/peko/modules/luckyTarot/images/middleBg.png b/view/peko/modules/luckyTarot/images/middleBg.png
new file mode 100644
index 0000000..80d6892
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/middleBg.png differ
diff --git a/view/peko/modules/luckyTarot/images/tabBox.png b/view/peko/modules/luckyTarot/images/tabBox.png
new file mode 100644
index 0000000..3861acd
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/tabBox.png differ
diff --git a/view/peko/modules/luckyTarot/images/travel/back.png b/view/peko/modules/luckyTarot/images/travel/back.png
new file mode 100644
index 0000000..7b81adb
Binary files /dev/null and b/view/peko/modules/luckyTarot/images/travel/back.png differ
diff --git a/view/peko/modules/luckyTarot/index.html b/view/peko/modules/luckyTarot/index.html
new file mode 100644
index 0000000..adbd51d
--- /dev/null
+++ b/view/peko/modules/luckyTarot/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <title>幸运塔罗</title>
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 顶部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+        <p>幸运塔罗</p>
+    </div>
+    <!-- 主视觉 -->
+    <img src="./images/header.png" alt="" class="header">
+    <!-- 十倍金币 -->
+    <img src="./images/10Gold.png" alt="" class="gold_10">
+    <!-- 玩法介绍 -->
+    <div class="rule">玩法介绍</div>
+    <!-- 中奖记录 -->
+    <div class="record">中奖记录</div>
+    <!-- 塔罗大背景 -->
+    <div class="tarotBox">
+        <!-- 选择等级tab -->
+        <div class="tabBox">
+            <div class="active1">初級卡</div>
+            <div>中級卡</div>
+            <div>高級卡</div>
+        </div>
+        <!-- 等级介绍 -->
+        <p class="gradeText">翻到金幣卡獲得<b>100</b>金幣</p>
+        <!-- 剩余钻石 -->
+        <div class="diamond">
+            <img src="./images/diamond.png" alt="" class="diamondIcon">
+            <b>1000</b>
+            <img src="./images/add.png" alt="" class="add">
+        </div>
+        <!-- 默认卡片 -->
+        <div class="cardBox cardBox0"></div>
+        <div class="cardBox cardBox1"></div>
+        <div class="cardBox cardBox2"></div>
+        <div class="cardBox cardBox3"></div>
+        <div class="cardBox cardBox4"></div>
+        <div class="cardBox cardBox5"></div>
+        <div class="cardBox cardBox6"></div>
+        <div class="cardBox cardBox7"></div>
+        <div class="cardBox cardBox8"></div>
+        <div class="cardBox cardBox9"></div>
+        <!-- 翻拍按钮 -->
+        <img src="./images/but.png" alt="" class="but">
+    </div>
+    <!-- 本活動最終解釋權歸所有&本活動以及活動獎勵與蘋果公司無關 -->
+    <h3>本活動最終解釋權歸PEKO所有</h3>
+    <h3>本活動以及活動獎勵與蘋果公司無關</h3>
+</body>
+
+</html>
+<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="./js/index.js"></script>
\ No newline at end of file
diff --git a/view/peko/modules/luckyTarot/js/index.js b/view/peko/modules/luckyTarot/js/index.js
new file mode 100644
index 0000000..cf63ce8
--- /dev/null
+++ b/view/peko/modules/luckyTarot/js/index.js
@@ -0,0 +1,72 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+const showLoading = (content = '加載中...') => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success (e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = '操作完成', time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+$(function () {
+    setTimeout(function () {
+        getInfoFromClient()
+        setTimeout(function () {
+            // 页面全屏
+            if (browser.app) {
+                if (browser.android) {
+                    window.androidJsObj.initShowNav(false)
+                } else {
+                    window.webkit.messageHandlers.initShowNav.postMessage(0)
+                }
+            };
+            // 顶部返回事件
+            $('.back').click(() => {
+                if (browser.android) {
+                    window.androidJsObj.closeWebView()
+                } else {
+                    window.webkit.messageHandlers.closeWebView.postMessage(null)
+                }
+            })
+        }, 100)
+    })
+})
+// 接口 
+function get () {
+    showLoading()
+    networkRequest({
+        type: 'GET',
+        url: urlPrefix + '',
+        data: {},
+        success (res) {
+            if (res.code === 200) {
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error (err) {
+            hideLoading(layerIndex)
+            toastMsg('網絡錯誤，請退出重進')
+        }
+    })
+}
\ No newline at end of file