|
|
@@ -1,5 +1,45 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
+ <div class="page">
|
|
|
+ <div class="nav-header">
|
|
|
+ <span class="title">绿洲水稻</span>
|
|
|
+ </div>
|
|
|
+ <div class="user">
|
|
|
+ <img src="@assets/png-biaoti.png" alt="" />
|
|
|
+ <div class="user-box">
|
|
|
+ <van-image
|
|
|
+ radius="100"
|
|
|
+ width="40"
|
|
|
+ height="40"
|
|
|
+ :src="showUser.avatar ? showUser.avatar : require('@assets/img_default_photo.png')"
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+ <div class="user-info">
|
|
|
+ <div class="text1">
|
|
|
+ <span>{{ showUser.nickname }}</span>
|
|
|
+ <img src="@assets/icon_bianji.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="text2">积分 20</div>
|
|
|
+ </div>
|
|
|
+ <div class="user-progress">
|
|
|
+ <span>Lv.1</span>
|
|
|
+ <van-progress
|
|
|
+ :percentage="50"
|
|
|
+ color="#EFBA74"
|
|
|
+ pivot-color="transparent"
|
|
|
+ text-color="#B2681F"
|
|
|
+ stroke-width="10"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar">
|
|
|
+ <div class="toolbar-item rank">
|
|
|
+ <img src="@assets/icon_paihang.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="toolbar-item rule">
|
|
|
+ <img src="@assets/icon_shuoming.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<iframe
|
|
|
class="game"
|
|
|
ref="game"
|
|
|
@@ -7,31 +47,226 @@
|
|
|
frameborder="0"
|
|
|
id="game"
|
|
|
></iframe>
|
|
|
- <van-button type="primary" @click="send">发消息</van-button>
|
|
|
+ <div class="progress">
|
|
|
+ <van-progress :percentage="50" stroke-width="12" />
|
|
|
+ <div class="progress-text">今日已浇灌2次，再浇10次即可升级</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="task">
|
|
|
+ <van-badge content="可领取" :offset="[3, 6]">
|
|
|
+ <img src="@assets/png-lingshuidi.png" @click="showTask" alt="" />
|
|
|
+ </van-badge>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <rice-task @send="send" ref="task"></rice-task>
|
|
|
+ <rice-rank ref="rank"></rice-rank>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import RiceTask from '../../components/rice/Task.vue';
|
|
|
+import RiceRank from '../../components/rice/Rank.vue';
|
|
|
+import { mapState } from 'vuex';
|
|
|
export default {
|
|
|
mounted() {
|
|
|
this.$nextTick(() => {
|
|
|
console.log(this.$refs.game);
|
|
|
- document.getElementById('game').addEventListener('message', function (event) {
|
|
|
+ window.addEventListener('message', function (event) {
|
|
|
console.log(event);
|
|
|
});
|
|
|
});
|
|
|
+ this.$http.get('/MonkeyText/test');
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo']),
|
|
|
+ showUser() {
|
|
|
+ return this.isLogin
|
|
|
+ ? this.userInfo
|
|
|
+ : {
|
|
|
+ nickname: '小猴子'
|
|
|
+ };
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
+ showTask() {
|
|
|
+ this.$refs.task.init();
|
|
|
+ },
|
|
|
send() {
|
|
|
- document.getElementById('game').contentWindow.postMessage({ message: 'hel1o from parent' }, '*');
|
|
|
+ document.getElementById('game').contentWindow.postMessage({ message: { type: 'water_Times' } }, '*');
|
|
|
}
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ RiceTask,
|
|
|
+ RiceRank
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.game {
|
|
|
- width: 100vw;
|
|
|
- height: 130vw;
|
|
|
+ width: calc(100vw - 24px);
|
|
|
+ height: calc(100vw - 24px);
|
|
|
+ margin: 0 auto;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 2px solid #ffffff;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
+.page {
|
|
|
+ min-height: var(--app-height) !important;
|
|
|
+ background: linear-gradient(181deg, #7dbdff 0%, #7ebdff 54%, #61c65e 61%, #61c65d 100%);
|
|
|
+ // .flex-col();
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.nav-header {
|
|
|
+ padding: 16px 0 10px;
|
|
|
+ .flex();
|
|
|
+ justify-content: center;
|
|
|
+ // position: fixed;
|
|
|
+ // top: 0;
|
|
|
+ z-index: 20;
|
|
|
+ .title {
|
|
|
+ font-size: 26px;
|
|
|
+ font-family: YouSheBiaoTiYuan;
|
|
|
+ font-weight: lighter;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 34px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.user {
|
|
|
+ margin: 0 23px;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-box {
|
|
|
+ position: absolute;
|
|
|
+ left: 24px;
|
|
|
+ top: 14px;
|
|
|
+ bottom: 14px;
|
|
|
+ right: 20px;
|
|
|
+ .flex();
|
|
|
+ .van-image {
|
|
|
+ border: 2px solid #804810;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 16px;
|
|
|
+ .text1 {
|
|
|
+ .flex();
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: AlibabaPuHuiTi;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #804810;
|
|
|
+ line-height: 22px;
|
|
|
+ img {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 11px;
|
|
|
+ font-family: AlibabaPuHuiTi;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #804810;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-progress {
|
|
|
+ .flex();
|
|
|
+ background: #b2681f;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 3px 6px;
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: AlibabaPuHuiTi;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+ /deep/ .van-progress {
|
|
|
+ width: 52px;
|
|
|
+ --van-progress-pivot-font-size: 8px;
|
|
|
+ --van-progress-pivot-line-height: 23px;
|
|
|
+ margin-left: 2px;
|
|
|
+ .van-progress__portion {
|
|
|
+ height: calc(100% - 2px);
|
|
|
+ top: 1px;
|
|
|
+ left: 1px;
|
|
|
+ }
|
|
|
+ .van-progress__pivot {
|
|
|
+ font-family: AlibabaPuHuiTi;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.toolbar {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px 12px;
|
|
|
+
|
|
|
+ .toolbar-item {
|
|
|
+ .flex();
|
|
|
+ background: rgba(255, 255, 255, 0.4);
|
|
|
+ border-radius: 12px;
|
|
|
+ backdrop-filter: blur(2px);
|
|
|
+ padding: 2px 4px;
|
|
|
+ img {
|
|
|
+ display: block;
|
|
|
+ width: auto;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.task {
|
|
|
+ position: relative;
|
|
|
+ margin: 18px auto;
|
|
|
+ width: 52px;
|
|
|
+ img {
|
|
|
+ width: 52px;
|
|
|
+ height: auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.van-badge {
|
|
|
+ --van-badge-font-size: 10px;
|
|
|
+ --van-border-radius-max: 7px 7px 7px 0px;
|
|
|
+ line-height: 14px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.progress {
|
|
|
+ margin: 16px 80px;
|
|
|
+ .van-progress {
|
|
|
+ --van-progress-color: linear-gradient(180deg, #96eeff 0%, #4cd3ff 100%);
|
|
|
+ --van-progress-height: 12px;
|
|
|
+ --van-progress-background-color: #136232;
|
|
|
+ .van-progress__pivot {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .progress-text {
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: AlibabaPuHuiTi;
|
|
|
+ color: #214f37;
|
|
|
+ line-height: 17px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
