Skip to content

W
walk_daka_h5
Commit ff06bda9 by Caiyijun
Options

修改轮播组件

parent 9bb8419e
Showing with 117 additions and 45 deletions
package-lock.json
...@@ -3523,6 +3523,14 @@ ...@@ -3523,6 +3523,14 @@
"entities": "^1.1.1" "entities": "^1.1.1"
} }
}, },
"dom7": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
"integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
"requires": {
"ssr-window": "^1.0.1"
}
},
"domain-browser": { "domain-browser": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz", "resolved": "http://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
...@@ -4318,8 +4326,7 @@ ...@@ -4318,8 +4326,7 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
...@@ -4340,14 +4347,12 @@ ...@@ -4340,14 +4347,12 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
...@@ -4362,20 +4367,17 @@ ...@@ -4362,20 +4367,17 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
...@@ -4492,8 +4494,7 @@ ...@@ -4492,8 +4494,7 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
...@@ -4505,7 +4506,6 @@ ...@@ -4505,7 +4506,6 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
...@@ -4520,7 +4520,6 @@ ...@@ -4520,7 +4520,6 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
...@@ -4528,14 +4527,12 @@ ...@@ -4528,14 +4527,12 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
...@@ -4554,7 +4551,6 @@ ...@@ -4554,7 +4551,6 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
...@@ -4635,8 +4631,7 @@ ...@@ -4635,8 +4631,7 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
...@@ -4648,7 +4643,6 @@ ...@@ -4648,7 +4643,6 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
...@@ -4734,8 +4728,7 @@ ...@@ -4734,8 +4728,7 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
...@@ -4771,7 +4764,6 @@ ...@@ -4771,7 +4764,6 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
...@@ -4791,7 +4783,6 @@ ...@@ -4791,7 +4783,6 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
...@@ -4835,14 +4826,12 @@ ...@@ -4835,14 +4826,12 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true, "dev": true
"optional": true
} }
} }
}, },
...@@ -6676,8 +6665,7 @@ ...@@ -6676,8 +6665,7 @@
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz", "resolved": "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
"dev": true
}, },
"object-copy": { "object-copy": {
"version": "0.1.0", "version": "0.1.0",
...@@ -8779,6 +8767,11 @@ ...@@ -8779,6 +8767,11 @@
"tweetnacl": "~0.14.0" "tweetnacl": "~0.14.0"
} }
}, },
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"ssri": { "ssri": {
"version": "6.0.1", "version": "6.0.1",
"resolved": "http://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz", "resolved": "http://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
...@@ -9068,6 +9061,15 @@ ...@@ -9068,6 +9061,15 @@
"util.promisify": "~1.0.0" "util.promisify": "~1.0.0"
} }
}, },
"swiper": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.0.tgz",
"integrity": "sha512-jRCd/CGet9kaHwthHdd/sL/YU8CI157PWLyItnIcn/o/jP4haVky3zTF6f9F3JDpmQIw7jdWihISiYx0/oTHsg==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
},
"tapable": { "tapable": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz", "resolved": "http://registry.npm.taobao.org/tapable/download/tapable-1.1.1.tgz",
...@@ -9656,6 +9658,15 @@ ...@@ -9656,6 +9658,15 @@
"resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.8.tgz", "resolved": "http://registry.npm.taobao.org/vue/download/vue-2.6.8.tgz",
"integrity": "sha1-8hy8U2v8FPfR15KhN7sS9p5g6pE=" "integrity": "sha1-8hy8U2v8FPfR15KhN7sS9p5g6pE="
}, },
"vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
}
},
"vue-calendar-component": { "vue-calendar-component": {
"version": "2.8.2", "version": "2.8.2",
"resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz", "resolved": "https://registry.npmjs.org/vue-calendar-component/-/vue-calendar-component-2.8.2.tgz",
......
package.json
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"dependencies": { "dependencies": {
"axios": "^0.18.0", "axios": "^0.18.0",
"vue": "^2.6.6", "vue": "^2.6.6",
"vue-awesome-swiper": "^3.1.3",
"vue-calendar-component": "^2.8.2", "vue-calendar-component": "^2.8.2",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vuex": "^3.0.1", "vuex": "^3.0.1",
......
src/views/HaveJoinedGame.vue
...@@ -14,7 +14,27 @@ ...@@ -14,7 +14,27 @@
<div class="target-people-text">已有2468人参赛</div> <div class="target-people-text">已有2468人参赛</div>
</div> </div>
<div class="hr"></div> <div class="hr"></div>
<div class="game-scroll-container"> <!--<div class="game-scroll-container">-->
<!--<div class="game-scroll-item">-->
<!--<div class="item-title-status">-->
<!--<div class="item-title">第一天</div>-->
<!--<div class="item-status2">已淘汰</div>-->
<!--</div>-->
<!--<div class="item-income" style="visibility: hidden;">-->
<!--<div class="item-amount">2.56</div>-->
<!--<div class="item-text">(元) 预计收益</div>-->
<!--</div>-->
<!--<div class="item-progress-num">-->
<!--<div class="item-num" v-if="false">还有01天03小时56秒开始</div>-->
<!--<template v-else>-->
<!--<div class="item-progress" :style="'width: '+rate/100*2.46+'rem;'"></div>-->
<!--<div class="item-num">2635/5000步</div>-->
<!--</template>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<swiper :options="swiperOption" class="game-scroll-container">
<swiper-slide>
<div class="game-scroll-item"> <div class="game-scroll-item">
<div class="item-title-status"> <div class="item-title-status">
<div class="item-title">第一天</div> <div class="item-title">第一天</div>
...@@ -32,6 +52,8 @@ ...@@ -32,6 +52,8 @@
</template> </template>
</div> </div>
</div> </div>
</swiper-slide>
<swiper-slide>
<div class="game-scroll-item"> <div class="game-scroll-item">
<div class="item-title-status"> <div class="item-title-status">
<div class="item-title">第一天</div> <div class="item-title">第一天</div>
...@@ -49,6 +71,8 @@ ...@@ -49,6 +71,8 @@
</template> </template>
</div> </div>
</div> </div>
</swiper-slide>
<swiper-slide>
<div class="game-scroll-item"> <div class="game-scroll-item">
<div class="item-title-status"> <div class="item-title-status">
<div class="item-title">第一天</div> <div class="item-title">第一天</div>
...@@ -66,40 +90,76 @@ ...@@ -66,40 +90,76 @@
</template> </template>
</div> </div>
</div> </div>
</div> </swiper-slide>
</swiper>
<div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div> <div class="func-btn" @click="goOtherPage('GoXCX')">提交今日步数</div>
</div> </div>
</template> </template>
<script> <script>
import Title from "@/components/Title.vue"; import Title from "@/components/Title.vue"
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default { export default {
name: "HaveJoinedGame", name: "HaveJoinedGame",
components: { components: {
Title Title,
swiper,
swiperSlide
}, },
data() { data () {
return { return {
rate: 50 rate: 50,
banner_list: [
{
image: 'http://localhost:8080/img/img_card.440e4585.png',
},
{
image: 'http://localhost:8080/img/img_card.440e4585.png',
},
{
image: 'http://localhost:8080/img/img_card.440e4585.png',
}
],
swiperOption: {
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10
}
} }
}, },
created() { created () {
}, },
methods: { methods: {
goback() { goback () {
history.go(-1); history.go(-1)
}, },
goOtherPage(pageName) { goOtherPage (pageName) {
this.$router.push({name: pageName}); this.$router.push({name: pageName})
}, },
currentPage() { currentPage () {
return this.$router.history.current.name; return this.$router.history.current.name
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.swiper-container {
margin-left: 0 !important;
}
.swiper-slide {
width: 5.1rem;
height: 2.68rem;
}
.swiper-slide img {
width: 5.1rem;
height: 2.68rem;
}
.have-joined-game-page { .have-joined-game-page {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment