Skip to content

C
community_vote
Commit eab992d2 authored by xhx's avatar xhx
Browse files
Options

调整

parents f1657c9f b6719eff
Hide whitespace changes
Inline Side-by-side
Showing with 239 additions and 191 deletions
package-lock.json
View file @ eab992d2
...@@ -4890,6 +4890,14 @@ ...@@ -4890,6 +4890,14 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==" "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
}, },
"axios": {
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"requires": {
"follow-redirects": "^1.10.0"
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
...@@ -6070,6 +6078,16 @@ ...@@ -6070,6 +6078,16 @@
"integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==", "integrity": "sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==",
"dev": true "dev": true
}, },
"clipboard": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
"integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
"requires": {
"good-listener": "^1.2.2",
"select": "^1.1.2",
"tiny-emitter": "^2.0.0"
}
},
"clipboardy": { "clipboardy": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz", "resolved": "https://registry.npmjs.org/clipboardy/-/clipboardy-2.3.0.tgz",
...@@ -7181,6 +7199,11 @@ ...@@ -7181,6 +7199,11 @@
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=" "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
}, },
"delegate": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
"integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
},
"depd": { "depd": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
...@@ -8415,8 +8438,7 @@ ...@@ -8415,8 +8438,7 @@
"follow-redirects": { "follow-redirects": {
"version": "1.14.1", "version": "1.14.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
"integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg=="
"dev": true
}, },
"for-in": { "for-in": {
"version": "1.0.2", "version": "1.0.2",
...@@ -8996,6 +9018,14 @@ ...@@ -8996,6 +9018,14 @@
"slash": "^2.0.0" "slash": "^2.0.0"
} }
}, },
"good-listener": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
"integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
"requires": {
"delegate": "^3.1.2"
}
},
"graceful-fs": { "graceful-fs": {
"version": "4.2.6", "version": "4.2.6",
"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
...@@ -13073,6 +13103,11 @@ ...@@ -13073,6 +13103,11 @@
"resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz", "resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz",
"integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ=" "integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ="
}, },
"select": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
"integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
},
"select-hose": { "select-hose": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
...@@ -15033,6 +15068,14 @@ ...@@ -15033,6 +15068,14 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
}, },
"vue-clipboard2": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz",
"integrity": "sha512-H5S/agEDj0kXjUb5GP2c0hCzIXWRBygaWLN3NEFsaI9I3uWin778SFEMt8QRXiPG+7anyjqWiw2lqcxWUSfkYg==",
"requires": {
"clipboard": "^2.0.0"
}
},
"vue-date-pick": { "vue-date-pick": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.4.1.tgz", "resolved": "https://registry.npmjs.org/vue-date-pick/-/vue-date-pick-1.4.1.tgz",
......
package.json
View file @ eab992d2
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"@trevoreyre/autocomplete-vue": "^2.2.0", "@trevoreyre/autocomplete-vue": "^2.2.0",
"animejs": "^3.2.1", "animejs": "^3.2.1",
"ant-design-vue": "^1.7.5", "ant-design-vue": "^1.7.5",
"axios": "^0.21.1",
"bip39": "^3.0.4", "bip39": "^3.0.4",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"dexie": "^3.0.3", "dexie": "^3.0.3",
......
public/img/bg/squareBanner.png
View replaced file @ f1657c9f View file @ eab992d2
public/img/bg/squareBanner.png

88.3 KB | W: | H:

public/img/bg/squareBanner.png

79.4 KB | W: | H:

public/img/bg/squareBanner.png
public/img/bg/squareBanner.png
public/img/bg/squareBanner.png
public/img/bg/squareBanner.png
  • 2-up
  • Swipe
  • Onion skin
src/components/common/Btn.vue
View file @ eab992d2
<template> <template>
<div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3" :class="getSize && border" @click="eventEmit"> <div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3" :class="getSize && border" @click="eventEmit">
{{text}} {{text}}
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
......
src/components/common/Search.vue 0 → 100644
View file @ eab992d2
<template>
<div class='search flex items-center bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
<div class='search-input flex-grow'>
<input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
</div>
<app-icon size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
</div>
</template>
<script lang="ts">
import Vue,{Component} from 'vue';
import { Icon } from 'ant-design-vue';
Vue.use(Icon)
const AppIcon = Icon.createFromIconfontCN({
scriptUrl:'/iconfont.js' // generated by iconfont.cn
});
export default Vue.extend({
props: {
},
components:{
'app-icon':AppIcon as Component
}
});
</script>
src/components/home/AttendForm.vue
View file @ eab992d2
<template> <template>
<div class="flex flex-col attend-form px-4 mb-20" v-show="attendShow"> <div class="flex flex-col attend-form px-4 pb-20" v-show="attendShow">
<div class="px-4 py-5 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg"> <div class="px-4 py-5 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
<p class="text-sm mb-2.5">社区名称</p> <p class="text-sm mb-2.5">社区名称</p>
<div> <div>
...@@ -53,23 +53,3 @@ export default Vue.extend({ ...@@ -53,23 +53,3 @@ export default Vue.extend({
}) })
</script> </script>
<style scoped>
input, button, textarea {
outline: none;
}
.x-input {
width: 100%;
height: 40px;
border-radius: 10px;
margin-bottom: 10px;
padding-left: 12px;
padding-right: 12px;
font-weight: 500;
color: rgba(36, 36, 37, 0.8);
box-shadow: 0px 3px 4px 0px #BCB3DC inset;
}
.x-area {
padding-top: 12px;
height: 160px;
}
</style>
\ No newline at end of file
src/components/home/Banner.vue
View file @ eab992d2
<template> <template>
<div class="home-banner relative"> <div class="home-banner relative">
<div class="mt-6 flex justify-center flex-grow-0" :class="{ 'mb-8': !showBtn }"> <div class="pt-5">
<img class="logo w-60 h-40 transform scale-100" src="@/assets/home/banner-img.png" alt=""> <img class="w-48 object-fill mx-auto" src="@/assets/home/banner-img.png" alt="">
</div> </div>
<div v-if="!canAttend && showBtn" ref="imgbtn" class="fixed top-1/2 right-1 z-50 imgbtn" :style="{ top: top, right: right }" @click="attendActivity">
<img class="w-16 h-16" src="@/assets/home/a-btn.png" alt="">
</div>
<!-- <template v-if="!scrollHide"> -->
<div <div
v-if="showBtn" v-if="!showPart"
class="header-box w-full h-auto pb-12 flex flex-col items-center justify-center" class="header-box w-full h-auto flex flex-col items-center justify-center"
:class="{ 'opacity-0': scrollHide }" :class="{ 'opacity-0': scrollHide }"
:style="{ 'height': showBtn ? 'auto' : '' }"
> >
<button
v-if="canAttend" <app-btn @btnClicked='attendActivity' text="开始报名" class=" bg-app-cyan text-app-blue-1 px-5"></app-btn>
class="apply-btn text-center text-xs font-medium rounded mt-2 mb-4"
@click="attendActivity" <p v-if="voteType === 1" class="text-center text-xs mb-2">距离本轮投票开始还有约</p>
>开始报名</button> <p v-if="voteType === 2" class="text-center text-xs mb-2">距离本轮投票结束还剩约</p>
<p v-if="voteType === 1" class="text-center text-sm mb-3">距离本轮投票开始还有约</p> <p v-if="voteType === 3" class="text-center text-xs mb-2">本轮投票已结束</p>
<p v-if="voteType === 2" class="text-center text-sm mb-3">距离本轮投票结束还剩约</p>
<p v-if="voteType === 3" class="text-center text-sm mb-3">本轮投票已结束</p>
<div class="px-10"> <div class="px-10">
<Timebox times="1633304684145" /> <Timebox times="1633304684145" />
</div> </div>
</div> </div>
<!-- </template> -->
<div v-if="showBtn" class="mt-3 w-full px-6 absolute bottom-0">
<div class='search flex items-center w-full bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'>
<div class='search-input flex-grow'>
<input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
</div>
<app-icon size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
</div>
</div>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import Timebox from '@/components/Timebox.vue' import Timebox from '@/components/Timebox.vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({ export default Vue.extend({
components: { components: {
Timebox, Timebox,
AppIcon, 'app-btn':()=>import('@/components/common/Btn.vue')
}, },
name: 'HomeBanner', name: 'HomeBanner',
data() { data() {
return { return {
voteType: 1, voteType: 1,
canAttend: false, canAttend: true,
clientWidth: 0, clientWidth: 0,
clientHeight: 0, clientHeight: 0,
top: '50%', top: '50%',
...@@ -64,6 +47,9 @@ export default Vue.extend({ ...@@ -64,6 +47,9 @@ export default Vue.extend({
type: Boolean, type: Boolean,
default: true default: true
}, },
showPart:{
type: Boolean
},
scrollHide: { scrollHide: {
type: Boolean, type: Boolean,
default: false default: false
...@@ -76,80 +62,15 @@ export default Vue.extend({ ...@@ -76,80 +62,15 @@ export default Vue.extend({
search() { search() {
console.log('run') console.log('run')
}, },
touchEvent() {
this.clientWidth = window.innerWidth
this.clientHeight = window.innerHeight
window.onresize = () => {
this.clientWidth = window.innerWidth
this.clientHeight = window.innerHeight
}
window.onscroll = () => {
this.clientWidth = window.innerWidth
this.clientHeight = window.innerHeight
}
this.$nextTick(()=>{
const div = this.$refs.imgbtn as any
div.addEventListener("touchstart",(e: any)=>{
e.stopPropagation();
div.style.transition = 'none'
});
div.addEventListener("touchmove",(e: any)=>{
e.preventDefault()
e.stopPropagation()
if (e.targetTouches.length === 1) {
let touch = e.targetTouches[0]
this.top = touch.clientY - 32 + 'px'
this.right = this.clientWidth - touch.clientX - 32 + 'px'
if(parseFloat(this.right) <= 0) {
this.right = '0'
} else if (parseFloat(this.right) > this.clientWidth - 64) {
this.right = this.clientWidth - 64 + 'px'
}
if(parseFloat(this.top) <= 0) {
this.top = '0'
} else if (parseFloat(this.top) > this.clientHeight - 64) {
this.top = this.clientHeight - 64 + 'px'
}
}
},{ passive: false });
div.addEventListener("touchend",(e: any)=>{
e.stopPropagation()
div.style.transition = 'all 0.3s'
if(parseFloat(this.top) <= 0) {
this.top = '0'
} else if (parseFloat(this.top) > this.clientHeight){
this.top = this.clientHeight - 64 + 'px'
}
})
})
}
},
mounted() {
// this.touchEvent()
}, },
watch: {
// showBtn(v: boolean) {
// if (v) {
// this.$nextTick(() => {
// this.touchEvent()
// })
// }
// }
}
}) })
</script> </script>
<style lang="css" scoped> <style lang="css" scoped>
.home-banner {
/* height: 360px; */
transition: 0.3s ease-in-out;
}
.apply-btn {
width: 100px;
height: 30px;
background: #4EE8F1;
color: #110E4E;
}
input { input {
outline: none; outline: none;
......
src/components/home/RankList.vue
View file @ eab992d2
<template> <template>
<div v-show="isShow" class="pt-7"> <div v-show="isShow" >
<div class="rank-list relative w-full px-4"> <div class=" relative w-11/12 mx-auto ">
<div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2"> <div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2">
<p class="text-center text-lg leading-10">排行榜</p> <p class="text-center text-lg leading-10">排行榜</p>
</div> </div>
<div class="lines border border-app-blue-3 border-solid rounded-lg" style="background: rgb(25, 2, 92)" ref="lines"> <div class="lines border border-app-blue-3 border-solid rounded-lg" style="background: rgb(25, 2, 92)" ref="lines">
<div class="overflow-y-scroll h-full" @scroll="scrollEvent"> <div class="overflow-y-scroll h-full" @scroll="scrollEvent">
<div class="rank-lines h-full px-3 flex flex-col items-center"> <div class="rank-lines h-full px-3 flex flex-col items-center">
<template v-if="ranklist.length > 0" class=""> <template v-if="ranklist.length > 0" class="">
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -27,14 +26,15 @@ ...@@ -27,14 +26,15 @@
<script lang="ts"> <script lang="ts">
import Cardtwo from '@/components/Card_two.vue' import Cardtwo from '@/components/Card_two.vue'
import Vue from 'vue' import Vue from 'vue'
import {TimelineLite, Power2} from 'gsap' import {TimelineLite, Power3} from 'gsap'
export default Vue.extend({ export default Vue.extend({
components: { Cardtwo }, components: { Cardtwo },
name: 'RankList', name: 'RankList',
data() { data() {
return { return {
anima: null as any, anima: null as any,
scrollArr: [] as any[] scrollArr: [] as any[],
directionUp:false
} }
}, },
props: { props: {
...@@ -48,39 +48,32 @@ export default Vue.extend({ ...@@ -48,39 +48,32 @@ export default Vue.extend({
}, },
methods: { methods: {
scrollEvent(e: any) { scrollEvent(e: any) {
// const scrollTop = e.target.scrollTop
// const line = this.$refs.lines as any
// if (scrollTop > 320) {
// this.$emit('scrollEvent', true)
// line.style.height = 'calc(100vh - 220px)'
// } else {
// this.$emit('scrollEvent', false)
// line.style.height = 'calc(100vh - 400px)'
// }
let poisition = e.target.scrollTop let poisition = e.target.scrollTop
this.scrollArr.push(poisition) this.scrollArr.push(poisition)
let l = this.scrollArr.slice(-2) let l = this.scrollArr.slice(-2)
if(e.target.scrollTop > 120 && l[0]<l[1]){ if(poisition > 90 && l[0]<l[1]){
this.directionUp = false
this.anima.play() this.anima.play()
// this.destroyGASP() }else if(poisition <= 120 && l[0]>l[1]){
// this.initialGASP() this.directionUp = true
}else if(e.target.scrollTop <= 120 && l[0]>l[1]){
this.anima.reverse() this.anima.reverse()
// this.destroyGASP() // this.destroyGASP()
// this.backGASP() // this.backGASP()
} }
}, },
initialGASP() { initialGASP() {
const {lines} = this.$refs const {lines} = this.$refs
const top = this.$parent.$refs.banner as any const top = this.$parent.$refs.banner as any
const topBox = top.$el const topBox = top.$el
const img = topBox.querySelector('.logo') as any const img = topBox.querySelector('.logo') as any
const header = topBox.querySelector('.header-box') as any const header = topBox.querySelector('.header-box') as any
this.anima = new TimelineLite() this.anima = new TimelineLite({duration:0.1,ease:Power3.easeInOut})
this.anima.to(lines,0,{css:{height:"calc(100vh - 220px)"},ease:Power2.easeInOut, delay: 0.2}) this.anima.to(lines,{css:{height:"calc(100vh - 220px)"}})
this.anima.to(img,0.3,{css:{transform: 'scale(0.7)', transformOrigin: '50% 50%'},ease:Power2.easeInOut,}) this.anima.to(topBox,{css:{height:"205px"}})
this.anima.to(header,0.3,{css:{transform: 'scale(0)', transformOrigin: '50% 0'},ease:Power2.easeInOut, delay: 0.1}, '-=0.3') this.anima.to(header,{css:{transform: 'scale(0)', transformOrigin: '50% 0'}})
this.anima.to(topBox,0.3,{css:{height:"205px"},ease:Power2.easeInOut}, '-=0.3') this.anima.to(img,{css:{transform: 'scale(0.7)', transformOrigin: '50% 50%'}})
this.anima.pause() this.anima.pause()
}, },
backGASP() { backGASP() {
......
src/components/timebox.vue
View file @ eab992d2
<template> <template>
<div class="time-box flex items-center"> <div class="time-box flex items-center">
<div v-if="showNum >= 1" class="flex items-center"> <div v-if="showNum >= 1" class="flex items-center">
<div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ day }}</div> <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ day }}</div>
<p class="text text-xs mx-1 mb-0">天</p> <p class="text text-xs mx-1 mb-0">天</p>
</div> </div>
<div v-if="showNum >= 2" class="flex items-center"> <div v-if="showNum >= 2" class="flex items-center">
<div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ hour }}</div> <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ hour }}</div>
<p class="text text-xs mx-1 mb-0">时</p> <p class="text text-xs mx-1 mb-0">时</p>
</div> </div>
<div v-if="showNum >= 3" class="flex items-center"> <div v-if="showNum >= 3" class="flex items-center">
<div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ min }}</div> <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ min }}</div>
<p class="text text-xs mx-1 mb-0">分</p> <p class="text text-xs mx-1 mb-0">分</p>
</div> </div>
<div v-if="showNum >= 4" class="flex items-center"> <div v-if="showNum >= 4" class="flex items-center">
<div class="p-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ sec }}</div> <div class="p-1 px-2 rounded font-semibold" :style="fontStyle" :class="bgColor">{{ sec }}</div>
<p class="text text-xs mx-1 mb-0">秒</p> <p class="text text-xs mx-1 mb-0">秒</p>
</div> </div>
...@@ -42,7 +42,7 @@ export default Vue.extend({ ...@@ -42,7 +42,7 @@ export default Vue.extend({
}, },
bgColor:{ bgColor:{
type: String, type: String,
default:'bg-app-blue-3 ' default:'bg-app-blue-3'
}, },
showNum: { showNum: {
type: Number, type: Number,
...@@ -79,10 +79,3 @@ export default Vue.extend({ ...@@ -79,10 +79,3 @@ export default Vue.extend({
}) })
</script> </script>
<style scoped>
.time-items {
padding: 4px;
background: #191C73;
}
</style>
\ No newline at end of file
src/router/index.ts
View file @ eab992d2
...@@ -17,14 +17,14 @@ export const routes: Array<RouteConfig> = [ ...@@ -17,14 +17,14 @@ export const routes: Array<RouteConfig> = [
meta:{ meta:{
text: '英雄版', text: '英雄版',
icon: 'icon-yingxiongbang' icon: 'icon-yingxiongbang'
}, }
children: [ // children: [
{ // {
path: '/', // path: '/',
name: 'Home', // name: 'Home',
component: ()=>import('@/views/home/index.vue'), // component: ()=>import('@/views/home/index.vue'),
}, // },
] // ]
}, },
{ {
path: '/Square', path: '/Square',
......
src/service/index.ts 0 → 100644
View file @ eab992d2
import axios,{ AxiosInstance } from "axios";
class AppService {
// private baseUrl:string
private service:AxiosInstance
constructor(){
this.service = axios.create({
baseURL:this.getBaseUrl(),
timeout: 15000,
})
}
private getBaseUrl(){
return process.env == 'devlelop'?"123":"321"
}
}
\ No newline at end of file
src/service/index.vue deleted 100644 → 0
View file @ f1657c9f
接口的统一出口文件
\ No newline at end of file
src/views/Home.vue
View file @ eab992d2
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<router-view />
<div class="top bg-homeBanner bg-cover bg-center" ref='topBox'>
<Banner :showPart='attendShow'></Banner>
</div>
<div class="bot w-11.5/12 mt-3 mx-auto" ref="botbox" v-if='!attendShow'>
<app-search class=' w-11/12 mx-auto'></app-search>
<div class='list-contianer border-2 border-app-blue-3 h-auto mx-auto mt-5 relative rounded-xl' ref='borderBox'>
<div class='img-holder w-full absolute -top-4 '>
<div class=' absolute w-full top-2 text-center text-sm '>排行榜</div>
<img src="@/assets/home/rank-title.png" alt="" class="w-48 mx-auto ">
</div>
<div class='list w-11.5/12 mx-auto my-8 pb-12' @scroll="scrollStart" ref='scrollBox'>
<app-card2 class="mb-2" v-for="i in [1,2,3,4,5,6,7,8,9,10,11]" :key="i" />
</div>
</div>
</div>
<attend-form :attendShow="attendShow" @submitForm="submitForm" class='bot attend-form-contianer mt-5 overflow-y-scroll'/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from "vue" import Vue from "vue"
import {TimelineLite, Power2} from 'gsap'
import Banner from '@/components/home/Banner.vue'
export default Vue.extend({ export default Vue.extend({
name: "Home" name: "Home",
data() {
return{
anima:null as any,
scrollArr:[] as any[],
attendShow: true,
}
},
mounted(){
const {topBox,botBox,borderBox,scrollBox} = this.$refs
this.anima = new TimelineLite()
console.log(this.anima);
this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
this.anima.to(borderBox,0,{css:{height:"calc(100vh - 140px)"},ease:Power2.easeInOut})
this.anima.to(scrollBox,0,{css:{height:"calc(100vh - 160px)"},ease:Power2.easeInOut})
this.anima.to(topBox,0.6,{css:{height:"0px", visibility:'hidden'},ease:Power2.easeInOut,delay:0.1},'>-0.1')
this.anima.pause()
},
methods:{
scrollStart(e:any){
let poisition = e.target.scrollTop
this.scrollArr.push(poisition)
console.log(poisition);
let l = this.scrollArr.slice(-2)
if(e.target.scrollTop > 90 && l[0]<l[1]){
this.anima.play()
}else if(e.target.scrollTop <= 320 && l[0]>l[1]){
this.anima.reverse()
}
},
submitForm(){
console.log(1);
}
},
components:{
Banner,
'app-search':()=>import('@/components/common/Search.vue'),
"app-card2":()=>import('@/components/Card_two.vue'),
'attend-form':()=>import('@/components/home/AttendForm.vue')
}
}); });
</script> </script>
<style scoped>
.list-contianer{
height: calc(100vh - 370px)
}
.attend-form{
height: calc(100vh - 240px)
}
</style>
\ No newline at end of file
src/views/Square.vue
View file @ eab992d2
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<div class=" h-260px bg-squareBanner bg-center bg-cover bg-transparent bg-opacity-10 relative" ref="topBox"> <div class=" h-260px bg-squareBanner bg-center bg-cover bg-transparent bg-opacity-10 relative" ref="topBox">
<div class="flex flex-col justify-center items-center py-12" ref="textBox">
<img src="@/assets/squareBanner-text.png" alt="">
</div>
<div class='w-full absolute bottom-3 '> <div class='w-full absolute bottom-3 '>
<div class=' w-11/12 mx-auto h-10 text-white'> <div class=' w-11/12 mx-auto h-10 py-3 text-white'>
<div class='search flex items-center w-full bg-app-dark-2 bg-opacity-30 text-sm px-3 py-1 rounded-3xl border border-app-blue-3 hover:border-app-blue-2'> <app-search></app-search>
<div class='search-input flex-grow'>
<input type="text" class=" w-full bg-transparent" placeholder="输入项目名称/ID">
</div>
<app-icon size="20px" class="flex-grow-0" color="#ffffff" type='search'></app-icon>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -29,7 +27,7 @@ ...@@ -29,7 +27,7 @@
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
<app-card class=" mb-2"></app-card> <app-card class=" mb-2"></app-card>
<app-card2></app-card2> <app-card2></app-card2>
<div class="list-mergeup p-32"></div> <div class="list-mergeup p-18"></div>
</div> </div>
</div> </div>
<app-filter :show="showfilter" @filterList="filterList" @cancel="showhidden" /> <app-filter :show="showfilter" @filterList="filterList" @cancel="showhidden" />
...@@ -52,10 +50,11 @@ export default Vue.extend({ ...@@ -52,10 +50,11 @@ export default Vue.extend({
}; };
}, },
mounted(){ mounted(){
const {topBox,botBox} = this.$refs const {topBox,botBox,textBox} = this.$refs
this.anima = new TimelineLite() this.anima = new TimelineLite()
this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut}) this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
this.anima.to(topBox,0.6,{css:{height:"110px"},ease:Power2.easeInOut,delay:0.1}) this.anima.to(textBox,0.1,{opacity:0,ease:Power2.easeInOut})
this.anima.to(topBox,0.6,{css:{height:"50px"},ease:Power2.easeInOut,delay:0.1},'>-0.3')
this.anima.pause() this.anima.pause()
}, },
...@@ -63,7 +62,8 @@ export default Vue.extend({ ...@@ -63,7 +62,8 @@ export default Vue.extend({
'app-icon':()=>import('@/components/common/Icon.vue'), 'app-icon':()=>import('@/components/common/Icon.vue'),
'app-card':()=>import('@/components/Card.vue'), 'app-card':()=>import('@/components/Card.vue'),
'app-card2':()=>import('@/components/Card_two.vue'), 'app-card2':()=>import('@/components/Card_two.vue'),
'app-filter':()=>import('@/components/square/Filter.vue') 'app-filter':()=>import('@/components/square/Filter.vue'),
'app-search':()=>import('@/components/common/Search.vue')
}, },
methods:{ methods:{
doFilter(){ doFilter(){
......
src/views/mine/index.vue
View file @ eab992d2
<template> <template>
<div class="bg-body bg-top bg-contain bg-no-repeat"> <div class="bg-homeBanner bg-top bg-contain bg-no-repeat">
<h5 class="my-5 text-lg text-center text-white font-medium">我的提案</h5> <h5 class="my-5 text-lg text-center text-white font-medium">我的提案</h5>
<div class="tab flex justify-center items-center"> <div class="tab flex justify-center items-center">
<div class="px-8 text-sm" :class="{ 'active': tab === 1 }" @click="getList(1)">我发起的</div> <div class="px-8 text-sm" :class="{ 'active': tab === 1 }" @click="getList(1)">我发起的</div>
......
src/views/square/SquareVote.vue
View file @ eab992d2
...@@ -120,7 +120,7 @@ export default Vue.extend({ ...@@ -120,7 +120,7 @@ export default Vue.extend({
this.voteNum = this.rest + '' this.voteNum = this.rest + ''
}, },
vote() { vote() {
} }
}, },
mounted() { mounted() {
...@@ -132,6 +132,7 @@ export default Vue.extend({ ...@@ -132,6 +132,7 @@ export default Vue.extend({
this.$set(this.lists[i], 'type1', true) this.$set(this.lists[i], 'type1', true)
} }
} }
// 计算底部样式
const height = window.innerHeight const height = window.innerHeight
if (height < box.scrollHeight) { if (height < box.scrollHeight) {
this.hide = true this.hide = true
......
tailwind.config.js
View file @ eab992d2
...@@ -9,7 +9,7 @@ module.exports = { ...@@ -9,7 +9,7 @@ module.exports = {
backgroundImage: theme => ({ backgroundImage: theme => ({
'demo': "url('/img/bg/demo.png')", 'demo': "url('/img/bg/demo.png')",
'squareBanner':"url('/img/bg/squareBanner.png')", 'squareBanner':"url('/img/bg/squareBanner.png')",
'body': "url('/img/bg/banner.png')" 'homeBanner':"url('/img/bg/homeBanner.png')"
}) })
}, },
screens: { screens: {
...@@ -31,6 +31,7 @@ module.exports = { ...@@ -31,6 +31,7 @@ module.exports = {
"app-blue-2":'#666EED', "app-blue-2":'#666EED',
"app-blue-3":'#2F059A', "app-blue-3":'#2F059A',
"app-blue-4":'#240080', "app-blue-4":'#240080',
"app-cyan":'#4EE8F1',
"app-yellow-1":'#FFBB00', "app-yellow-1":'#FFBB00',
"app-green":'#0CAD8C', "app-green":'#0CAD8C',
"app-red":'#BF463D', "app-red":'#BF463D',
...@@ -807,6 +808,7 @@ module.exports = { ...@@ -807,6 +808,7 @@ module.exports = {
'10/12': '83.333333%', '10/12': '83.333333%',
'11/12': '91.666667%', '11/12': '91.666667%',
'filterWidth': '45%', 'filterWidth': '45%',
'11.5/12':'95.833333%',
full: '100%', full: '100%',
screen: '100vw', screen: '100vw',
min: 'min-content', min: 'min-content',
......
yarn.lock
View file @ eab992d2
...@@ -2262,6 +2262,13 @@ aws4@^1.2.1, aws4@^1.8.0: ...@@ -2262,6 +2262,13 @@ aws4@^1.2.1, aws4@^1.8.0:
resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" resolved "https://registry.nlark.com/aws4/download/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk= integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
axios@^0.21.1:
version "0.21.1"
resolved "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz?cache=0&sync_timestamp=1608609324963&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faxios%2Fdownload%2Faxios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
integrity sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=
dependencies:
follow-redirects "^1.10.0"
babel-code-frame@^6.22.0: babel-code-frame@^6.22.0:
version "6.26.0" version "6.26.0"
resolved "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b" resolved "https://registry.nlark.com/babel-code-frame/download/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
...@@ -4777,7 +4784,7 @@ flush-write-stream@^1.0.0: ...@@ -4777,7 +4784,7 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3" inherits "^2.0.3"
readable-stream "^2.3.6" readable-stream "^2.3.6"
follow-redirects@^1.0.0: follow-redirects@^1.0.0, follow-redirects@^1.10.0:
version "1.14.1" version "1.14.1"
resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43" resolved "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43"
integrity sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M= integrity sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=
......
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