Skip to content

C
community_vote
Commit b6719eff authored by hanfeng zhang's avatar hanfeng zhang
Browse files
Options

样式调整

parent 9290be36
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 141 deletions
src/components/common/Btn.vue
View file @ b6719eff
<template>
<div class="text-xs px-3 py-2 text-center cursor-pointer rounded my-3" :class="getSize && border" @click="eventEmit">
{{text}}
</div>
</template>
<script lang="ts">
......
src/components/common/Search.vue
View file @ b6719eff
<template>
<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 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>
......
src/components/home/AttendForm.vue
View file @ b6719eff
<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">
<p class="text-sm mb-2.5">社区名称</p>
<div>
......@@ -53,23 +53,3 @@ export default Vue.extend({
})
</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 @ b6719eff
......@@ -3,31 +3,22 @@
<div class="pt-5">
<img class="w-48 object-fill mx-auto" src="@/assets/home/banner-img.png" alt="">
</div>
<div v-if="!canAttend " 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
class="header-box w-full h-auto pb-12 flex flex-col items-center justify-center"
v-if="!showPart"
class="header-box w-full h-auto flex flex-col items-center justify-center"
:class="{ 'opacity-0': scrollHide }"
>
<button
v-if="canAttend"
class="apply-btn text-center text-xs font-medium rounded mt-2 mb-4"
@click="attendActivity"
>开始报名</button>
<p v-if="voteType === 1" class="text-center text-sm mb-3">距离本轮投票开始还有约</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>
<app-btn @btnClicked='attendActivity' text="开始报名" class=" bg-app-cyan text-app-blue-1 px-5"></app-btn>
<p v-if="voteType === 1" class="text-center text-xs mb-2">距离本轮投票开始还有约</p>
<p v-if="voteType === 2" class="text-center text-xs mb-2">距离本轮投票结束还剩约</p>
<p v-if="voteType === 3" class="text-center text-xs mb-2">本轮投票已结束</p>
<div class="px-10">
<Timebox times="1633304684145" />
</div>
</div>
<!-- </template> -->
<div class="mt-3 w-full px-6 absolute bottom-0">
<app-search></app-search>
</div>
</div>
</template>
......@@ -38,7 +29,7 @@ import Timebox from '@/components/Timebox.vue'
export default Vue.extend({
components: {
Timebox,
'app-search':()=>import('@/components/common/Search.vue')
'app-btn':()=>import('@/components/common/Btn.vue')
},
name: 'HomeBanner',
data() {
......@@ -56,6 +47,9 @@ export default Vue.extend({
type: Boolean,
default: true
},
showPart:{
type: Boolean
},
scrollHide: {
type: Boolean,
default: false
......@@ -68,80 +62,15 @@ export default Vue.extend({
search() {
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>
<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 {
outline: none;
......
src/components/timebox.vue
View file @ b6719eff
<template>
<div class="time-box 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>
</div>
<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>
</div>
<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>
</div>
<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>
</div>
......@@ -42,7 +42,7 @@ export default Vue.extend({
},
bgColor:{
type: String,
default:'bg-app-blue-3 '
default:'bg-app-blue-3'
},
showNum: {
type: Number,
......@@ -79,10 +79,3 @@ export default Vue.extend({
})
</script>
<style scoped>
.time-items {
padding: 4px;
background: #191C73;
}
</style>
\ No newline at end of file
src/router/index.ts
View file @ b6719eff
......@@ -17,14 +17,14 @@ export const routes: Array<RouteConfig> = [
meta:{
text: '英雄版',
icon: 'icon-yingxiongbang'
},
children: [
{
path: '/',
name: 'Home',
component: ()=>import('@/views/home/index.vue'),
},
]
}
// children: [
// {
// path: '/',
// name: 'Home',
// component: ()=>import('@/views/home/index.vue'),
// },
// ]
},
{
path: '/Square',
......
src/views/Home.vue
View file @ b6719eff
<template>
<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>
</template>
<script lang="ts">
import Vue from "vue"
import {TimelineLite, Power2} from 'gsap'
import Banner from '@/components/home/Banner.vue'
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>
<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 @ b6719eff
......@@ -5,7 +5,7 @@
<img src="@/assets/squareBanner-text.png" alt="">
</div>
<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'>
<app-search></app-search>
</div>
</div>
......@@ -27,7 +27,7 @@
<app-card class=" mb-2"></app-card>
<app-card class=" mb-2"></app-card>
<app-card2></app-card2>
<div class="list-mergeup p-32"></div>
<div class="list-mergeup p-18"></div>
</div>
</div>
</div>
......@@ -52,8 +52,7 @@ export default Vue.extend({
this.anima = new TimelineLite()
this.anima.to(botBox,0,{css:{height:"calc(100vh - 190px)"},ease:Power2.easeInOut})
this.anima.to(textBox,0.1,{opacity:0,ease:Power2.easeInOut})
this.anima.to(topBox,0.6,{css:{height:"110px"},ease:Power2.easeInOut,delay:0.1},'>-0.3')
this.anima.to(topBox,0.6,{css:{height:"50px"},ease:Power2.easeInOut,delay:0.1},'>-0.3')
this.anima.pause()
},
......
tailwind.config.js
View file @ b6719eff
......@@ -9,6 +9,7 @@ module.exports = {
backgroundImage: theme => ({
'demo': "url('/img/bg/demo.png')",
'squareBanner':"url('/img/bg/squareBanner.png')",
'homeBanner':"url('/img/bg/homeBanner.png')"
})
},
screens: {
......@@ -30,6 +31,7 @@ module.exports = {
"app-blue-2":'#666EED',
"app-blue-3":'#2F059A',
"app-blue-4":'#240080',
"app-cyan":'#4EE8F1',
"app-yellow-1":'#FFBB00',
"app-green":'#0CAD8C',
"app-red":'#BF463D',
......
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