Skip to content

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

静态页面

parent ad1b5248
Hide whitespace changes
Inline Side-by-side
Showing with 608 additions and 100 deletions
src/components/home/AttendForm.vue
View file @ 2bd06bbf
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<div class="px-4 py-5 border-2 border-app-blue-3 border-solid rounded-lg"> <div class="px-4 py-5 border-2 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>
<Input class="w-full h-10 rounded-lg mb-5 px-3 text-gray-600 x-input" placeholder="请输入社区名称" v-model="communityName" /> <input class="w-full h-10 rounded-lg mb-5 px-3 text-sm text-gray-600 x-input" placeholder="请输入社区名称" v-model="communityName" />
</div> </div>
<p class="text-sm mb-2.5">社区简介</p> <p class="text-sm mb-2.5">社区简介</p>
<div> <div>
<Input type="textarea" class="w-full h-40 rounded-lg px-3 pt-2 text-gray-600 x-input x-area" placeholder="这里写社区描述简介（500字以内）" v-model="intro" /> <textarea class="w-full h-40 rounded-lg px-3 pt-2 text-sm text-gray-600 x-input x-area" placeholder="这里写社区描述简介（500字以内）" v-model="intro"></textarea>
</div> </div>
</div> </div>
<button class="mt-5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="submit">提交</button> <button class="mt-5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="submit">提交</button>
...@@ -16,12 +16,8 @@ ...@@ -16,12 +16,8 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import { Input } from 'ant-design-vue'
export default Vue.extend({ export default Vue.extend({
name: 'AttendForm', name: 'AttendForm',
components: {
Input
},
props: { props: {
attendShow: { attendShow: {
type: Boolean, type: Boolean,
...@@ -62,7 +58,7 @@ export default Vue.extend({ ...@@ -62,7 +58,7 @@ export default Vue.extend({
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
font-weight: 500; font-weight: 500;
color: rgba(36, 36, 37, 0.4); color: rgba(36, 36, 37, 0.8);
box-shadow: 0px 3px 4px 0px #BCB3DC inset; box-shadow: 0px 3px 4px 0px #BCB3DC inset;
} }
.x-area { .x-area {
......
src/components/home/Banner.vue
View file @ 2bd06bbf
<template> <template>
<div class="home-banner"> <div class="home-banner">
<template v-if="!scrollHide"> <template v-if="!scrollHide">
<div class="mt-6 w-full flex justify-center" :class="{ 'mb-8': !showBtn }"> <div class="mt-6 w-full flex justify-center" :class="{ 'mb-8': !showBtn, 'opacity-0': scrollHide }">
<img class="w-60" src="@/assets/home/banner-img.png" alt=""> <img class="w-60" src="@/assets/home/banner-img.png" alt="">
</div> </div>
<div v-if="showBtn" class="w-full flex flex-col items-center justify-center"> <div v-if="showBtn" class="w-full flex flex-col items-center justify-center" :class="{ 'opacity-0': scrollHide }" :style="{ 'height': showBtn ? 'auto' : '' }">
<button <button
v-if="canAttend" v-if="canAttend"
class="apply-btn text-center text-xs font-medium rounded mt-2 mb-4" class="apply-btn text-center text-xs font-medium rounded mt-2 mb-4"
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
</div> </div>
</div> </div>
</template> </template>
<div v-if="showBtn" class="mt-3 w-full px-6"> <div v-if="showBtn" class="mt-3 w-full px-6" :class="[ scrollHide ? 'mt-16' : '' ]">
<Input class="xs-input" placeholder="请输入社区名称/ID" @pressEnter="search"> <Input class="xs-input" placeholder="请输入社区名称/ID" @pressEnter="search">
<div slot="addonAfter" @click="search"> <div slot="addonAfter" @click="search">
<app-icon customize size="20px" type='icon-sousuo'></app-icon> <app-icon customize size="20px" type='icon-sousuo'></app-icon>
...@@ -69,13 +69,10 @@ export default Vue.extend({ ...@@ -69,13 +69,10 @@ export default Vue.extend({
<style lang="css" scoped> <style lang="css" scoped>
.home-banner { .home-banner {
height: 360px; /* height: 360px; */
background-image: url(../../assets/home/banner.png);
background-position-x: 50%; transition: 0.3s ease-in-out;
background-position-y: 0%; transition-delay: 0.1;
background-size: 100%;
background-repeat: no-repeat;
transition: 0.3s ease-in;
} }
.apply-btn { .apply-btn {
width: 100px; width: 100px;
......
src/components/home/CommunityCard.vue
View file @ 2bd06bbf
...@@ -35,6 +35,7 @@ export default Vue.extend({ ...@@ -35,6 +35,7 @@ export default Vue.extend({
}, },
methods: { methods: {
goDetails() { goDetails() {
// 跳转判断，有详情跳转，没有不做动作
this.$router.push({ path: '/details', query: { id: this.community.id }}) this.$router.push({ path: '/details', query: { id: this.community.id }})
} }
} }
......
src/components/home/RankList.vue
View file @ 2bd06bbf
...@@ -4,12 +4,15 @@ ...@@ -4,12 +4,15 @@
<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 style="height: 460px; overflow-x: hidden" @scroll="scrollEvent"> <div class="lines border-2 border-app-blue-3 border-solid rounded-lg" ref="lines" @scroll="scrollEvent">
<div class="rank-lines mb-20 pt-10 px-3 flex flex-col items-center border-2 border-app-blue-3 border-solid rounded-lg" style="background: rgb(25,2,92)"> <div class="rank-lines px-3 flex flex-col items-center" style="background: rgb(25, 2, 92)">
<template v-if="ranklist.length > 0" class=""> <template v-if="ranklist.length > 0" class="">
<router-link class="block" v-for="item in ranklist" :key="item.id" :to="{ path: '/CommunityVote', query: { id: item.id }}"> <div class=" pt-10">
<Cardtwo class="mb-2.5" /> <router-link class="block text-white" v-for="item in ranklist" :key="item.id" :to="{ path: '/CommunityVote', query: { id: item.id }}">
</router-link> <Cardtwo class="mb-2.5" />
</router-link>
</div>
</template> </template>
<div v-else class="w-full h-full flex flex-col items-center justify-center"> <div v-else class="w-full h-full flex flex-col items-center justify-center">
<img class="w-28 h-28" src="@/assets/home/empty.png" alt="empty"> <img class="w-28 h-28" src="@/assets/home/empty.png" alt="empty">
...@@ -17,20 +20,20 @@ ...@@ -17,20 +20,20 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<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'
export default Vue.extend({ export default Vue.extend({
components: { Cardtwo }, components: { Cardtwo },
name: 'RankList', name: 'RankList',
data() { data() {
return { return {
anima: null as any,
scrollT: 0 scrollT: 0
} }
}, },
...@@ -44,11 +47,26 @@ export default Vue.extend({ ...@@ -44,11 +47,26 @@ export default Vue.extend({
} }
}, },
methods: { methods: {
scrollEvent() { scrollEvent(e: any) {
// const scrollTop = e.target.scrollTop const scrollTop = e.target.scrollTop
// console.log() const line = this.$refs.lines as any
if (scrollTop > 320) {
this.$emit('scrollEvent', true)
// this.anima.play()
line.style.height = 'calc(100vh - 220px)'
} else {
this.$emit('scrollEvent', false)
// this.anima.pause()
line.style.height = 'calc(100vh - 400px)'
}
} }
} },
// mounted() {
// const { lines } = this.$refs
// this.anima = new TimelineLite()
// this.anima.to(lines, 0, { css: { height: "calc(100vh - 400px)"}, ease: Power2.easeInOut })
// this.anima.pause()
// }
}) })
</script> </script>
...@@ -61,12 +79,9 @@ export default Vue.extend({ ...@@ -61,12 +79,9 @@ export default Vue.extend({
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.rank-list { .lines {
/* height: 460px; */ height: calc(100vh - 400px);
/* overflow-x: hidden; */ overflow-x: hidden;
} transition: 0.3s ease-in-out;
.rank-lines {
/* min-height: 460px; */
/* overflow: hidden; */
} }
</style> </style>
\ No newline at end of file
src/components/home/TicketBar.vue
View file @ 2bd06bbf
<template> <template>
<div class="ticket-bar flex relative"> <div class="ticket-bar flex relative">
<template v-if="$route.path === '/CommunityVote'"> <template v-if="$route.path !== '/Details'">
<div class="w-1/3 relative bg-blue rounded-lg flex-grow-0"> <div class="relative bg-blue rounded-lg flex-grow-0" :class="[cardStyle === 2 ? 'w-1/2' : 'w-1/3']">
<img class="w-14 absolute left-1/2 transform -translate-x-1/2 bottom-2" src="@/assets/home/ticket.png" alt=""> <img class="absolute left-1/2 transform -translate-x-1/2 bottom-2" :class="[ cardStyle === 2 ? 'w-10' : 'w-14' ]" src="@/assets/home/ticket.png" alt="">
</div> </div>
<div class="bg-blue rounded-lg flex-grow flex flex-col items-center justify-around"> <div class="bg-blue rounded-lg flex-grow flex flex-col items-center justify-around">
<p class="text-3xl mb-0">{{ ticketNum }}</p> <p class="text-3xl mb-0">{{ ticketNum }}</p>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</template> </template>
<template v-else> <template v-else>
<div class="w-1/3 relative bg-blue-dark flex-grow-0 rounded-l"> <div class="w-1/3 relative bg-blue-dark flex-grow-0 rounded-l">
<img class="w-14 absolute left-1/2 transform -translate-x-1/2 bottom-2" src="@/assets/home/ticket.png" alt=""> <img class="w-1/3 absolute left-1/2 transform -translate-x-1/2 bottom-2" src="@/assets/home/ticket.png" alt="">
</div> </div>
<div class="line absolute left-1/3 top-1"></div> <div class="line absolute left-1/3 top-1"></div>
<div class="bg-blue-dark flex-grow flex flex-col items-center justify-around rounded-r"> <div class="bg-blue-dark flex-grow flex flex-col items-center justify-around rounded-r">
...@@ -28,6 +28,10 @@ export default Vue.extend({ ...@@ -28,6 +28,10 @@ export default Vue.extend({
props: { props: {
ticketNum: { ticketNum: {
type: Number type: Number
},
cardStyle: {
type: Number,
default: 1
} }
} }
}) })
......
src/components/mine/Attend.vue
View file @ 2bd06bbf
<template> <template>
<div class="px-6 mt-4"> <div class="content px-6 mt-4 mb-16">
<router-link class="inline-block mb-3 text-white" :to="{ path: '/MyCommunity', query: { }}"> <template v-if="lists.length">
<card-two></card-two> <router-link
</router-link> v-for="item in communityList"
<router-link class="inline-block mb-3 text-white" :to="{ path: '/MyProject', query: { }}"> :key="item.id"
<card></card> class="inline-block mb-3 text-white"
</router-link> :to="{ path: tab === 1 ? '/MyCommunity' : '/AttendCommunity', query: {}}">
<card-two></card-two>
</router-link>
<router-link
v-for="item in projectList"
:key="item.id"
class="inline-block mb-3 text-white"
:to="{ path: tab === 1 ? '/MyProject' : '/AttendProject', query: { }}">
<card></card>
</router-link>
</template>
<template v-else>
<div class="no-content flex flex-col items-center justify-center border-2 border-app-blue-2 border-solid rounded-lg">
<img class="w-32 mb-2" src="@/assets/none.png" alt="">
<p class="text-sm text-white mb-2">抱歉！你暂无参与的投票项目！</p>
<p class="text-sm yellow-1">赶紧去参与吧！</p>
</div>
</template>
</div> </div>
</template> </template>
...@@ -17,6 +34,48 @@ export default Vue.extend({ ...@@ -17,6 +34,48 @@ export default Vue.extend({
components: { components: {
Card, Card,
CardTwo CardTwo
},
data() {
return {
lists: [] as any[],
communityList: [{id: 1}, {id: 2}, {id: 3}],
projectList: [{id: 11}, {id: 12}],
}
},
props: {
tab: {
type: Number
}
},
computed: {
},
watch: {
tab(n) {
if (n === 1) {
this.lists = [...this.communityList, ...this.projectList]
} else {
this.lists = [...this.communityList, ...this.projectList]
}
},
$route() {
// ...code
}
},
created() {
this.lists = [...this.communityList, ...this.projectList]
} }
}) })
</script> </script>
\ No newline at end of file
<style scoped>
.no-content, .content {
height: calc(100vh - 190px);
}
.content {
overflow-x: hidden;
}
.yellow-1 {
color: #FFBB00;
}
</style>
\ No newline at end of file
src/components/mine/ComeUp.vue
View file @ 2bd06bbf
<template>
<div class="px-6 mt-4">
<router-link class="inline-block mb-3 text-white" :to="{ path: '/MyCommunity', query: { }}">
<card-two></card-two>
</router-link>
<router-link class="inline-block mb-3 text-white" :to="{ path: '/MyProject', query: { }}">
<card></card>
</router-link>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Card from '@/components/Card.vue'
import CardTwo from '@/components/Card_two.vue'
export default Vue.extend({
components: {
Card,
CardTwo
}
})
</script>
\ No newline at end of file
src/components/mine/TicketRecord.vue 0 → 100644
View file @ 2bd06bbf
<template>
<div class="record border-2 border-app-blue-2 border-solid rounded-lg">
<div v-if="hasTitle" class="px-4 text-sm border-b leading-10">
title
</div>
<div class="px-3">
<div class="flex justify-between items-center px-1 leading-8 pt-3">
<span class="text-sm">投票时间</span>
<span class="tet-xs">5月28日 13:24:30</span>
</div>
<div class="flex justify-between items-center border-b px-1 leading-8 pb-3">
<span class="text-sm">投票数</span>
<span class="tet-xs">1200票</span>
</div>
<div class="px-1 text-xs leading-10 flex justify-between items-center">
<span>HASH</span>
<span class="flex items-center">
l1z9e1beb62e754ff3704d8ba626d6…1c5a0
<app-icon class="ml-1" customize size="12px" type='icon-arrow-right-copy-copy'></app-icon>
</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({
components: {
AppIcon
},
props: {
hasTitle: {
type: Boolean,
default: true
}
}
})
</script>
<style scoped>
.border-b {
/* padding-bottom: 20px; */
border-bottom: 2px solid #35379F;
}
</style>
\ No newline at end of file
src/router/index.ts
View file @ 2bd06bbf
...@@ -84,6 +84,21 @@ export const routes: Array<RouteConfig> = [ ...@@ -84,6 +84,21 @@ export const routes: Array<RouteConfig> = [
name: 'MyProject', name: 'MyProject',
component: ()=>import('@/views/mine/MyProject.vue'), component: ()=>import('@/views/mine/MyProject.vue'),
}, },
{
path: '/Transfer',
name: 'Transfer',
component: ()=>import('@/views/mine/Transfer.vue'),
},
{
path: '/AttendCommunity',
name: 'AttendCommunity',
component: ()=>import('@/views/mine/AttendCommunity.vue'),
},
{
path: '/AttendProject',
name: 'AttendProject',
component: ()=>import('@/views/mine/AttendProject.vue'),
},
] ]
}, },
...@@ -97,6 +112,16 @@ export const routes: Array<RouteConfig> = [ ...@@ -97,6 +112,16 @@ export const routes: Array<RouteConfig> = [
meta:{ meta:{
text:"设置成员" text:"设置成员"
} }
},
{
path: 'Home/CommunityVote',
name: 'CommunityVote',
component: ()=>import('@/views/home/CommunityVote.vue'),
},
{
path: 'Home/Details',
name: 'Details',
component: ()=>import('@/views/home/Details.vue'),
} }
] ]
......
src/views/Mine.vue
View file @ 2bd06bbf
<template> <template>
<div class="flex flex-col mine"> <div class="flex flex-col mine">
<router-view /> <keep-alive name="MinePage">
<router-view />
</keep-alive>
</div> </div>
</template> </template>
......
src/views/home/CommunityVote.vue
View file @ 2bd06bbf
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="mb-5"> <div class="mb-5">
<TicketBar :ticketNum="ticketNum" /> <TicketBar :ticketNum="ticketNum" />
</div> </div>
<Input class="x-input" placeholder="请输入投票数量" v-model="useNum" @input="checkInput" /> <input class="x-input text-sm" placeholder="请输入投票数量" v-model="useNum" @input="checkInput" />
<div class="flex items-center justify-between mt-3"> <div class="flex items-center justify-between mt-3">
<p class="text-sm text-gray-400">可用余票 <span class="inline-block text-white opacity-100">{{ rest }}</span></p> <p class="text-sm text-gray-400">可用余票 <span class="inline-block text-white opacity-100">{{ rest }}</span></p>
<p class="text-xs" @click="inAll">全部填入</p> <p class="text-xs" @click="inAll">全部填入</p>
...@@ -34,15 +34,13 @@ import TimeLine from '@/components/home/TimeLine.vue' ...@@ -34,15 +34,13 @@ import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue' import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue' import TicketBar from '@/components/home/TicketBar.vue'
import AppIcon from '@/components/common/Icon.vue' import AppIcon from '@/components/common/Icon.vue'
import { Input } from 'ant-design-vue'
import Vue from 'vue' import Vue from 'vue'
export default Vue.extend({ export default Vue.extend({
components: { components: {
TimeLine, TimeLine,
CommunityCard, CommunityCard,
TicketBar, TicketBar,
AppIcon, AppIcon
Input
}, },
name: 'CommunityVote', name: 'CommunityVote',
data() { data() {
...@@ -82,7 +80,7 @@ export default Vue.extend({ ...@@ -82,7 +80,7 @@ export default Vue.extend({
<style scoped> <style scoped>
.border-b { .border-b {
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 2px solid #666EED; border-bottom: 2px solid #35379F;
} }
.x-input { .x-input {
width: 100%; width: 100%;
...@@ -92,7 +90,7 @@ export default Vue.extend({ ...@@ -92,7 +90,7 @@ export default Vue.extend({
padding-left: 12px; padding-left: 12px;
padding-right: 12px; padding-right: 12px;
font-weight: 500; font-weight: 500;
color: rgba(36, 36, 37, 0.4); color: rgba(36, 36, 37, 0.8);
box-shadow: 0px 3px 4px 0px #BCB3DC inset; box-shadow: 0px 3px 4px 0px #BCB3DC inset;
} }
.vote-btn { .vote-btn {
......
src/views/home/Details.vue
View file @ 2bd06bbf
<template> <template>
<div class="details mb-20"> <div class="details mb-20">
<div class="w-full h-12 bg-app-drak-1 flex items-center fixed z-50"> <child-view>
<div class="w-8 h-8" @click="$router.back()"> <div class="pt-10">
<app-icon customize size="32px" type='icon-houtuishangyige'></app-icon> <time-line :height="height" />
</div>
</div>
<div class="pt-10">
<time-line :height="height" />
</div>
<div class="mt-3 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
<div class="border-b px-4">
<CommunityCard :community="community" :showIntro="false" />
</div> </div>
<div class="pt-7 px-4"> <div class="mt-3 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
<div class="mb-5"> <div class="border-b px-4">
<TicketBar :ticketNum="ticketNum" /> <CommunityCard :community="community" :showIntro="false" />
</div> </div>
<div> <div class="pt-7 px-4">
<p class="opacity-80 text-sm">社区简介</p> <div class="mb-5">
<p class="text-xs font-medium leading-6 opacity-80">这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， <TicketBar :ticketNum="ticketNum" />
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， </div>
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， <div>
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， <p class="opacity-80 text-sm">社区简介</p>
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。这里是社区介绍，有多少展示多少， <p class="text-xs font-medium leading-6 opacity-80">这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， 这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， 这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少， 这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。</p> 这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。</p>
</div>
</div> </div>
</div> </div>
</div> </child-view>
<!-- <div class="w-full h-12 bg-app-drak-1 flex items-center fixed z-50">
<div class="w-8 h-8" @click="$router.back()">
<app-icon customize size="32px" type='icon-houtuishangyige'></app-icon>
</div>
</div> -->
</div> </div>
</template> </template>
...@@ -38,13 +40,15 @@ import Vue from 'vue' ...@@ -38,13 +40,15 @@ import Vue from 'vue'
import TimeLine from '@/components/home/TimeLine.vue' import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue' import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue' import TicketBar from '@/components/home/TicketBar.vue'
import AppIcon from '@/components/common/Icon.vue' // import AppIcon from '@/components/common/Icon.vue'
import ChildView from '@/layouts/childView.vue'
export default Vue.extend({ export default Vue.extend({
components: { components: {
TimeLine, TimeLine,
CommunityCard, CommunityCard,
TicketBar, TicketBar,
AppIcon // AppIcon,
ChildView
}, },
data() { data() {
return { return {
...@@ -61,6 +65,6 @@ export default Vue.extend({ ...@@ -61,6 +65,6 @@ export default Vue.extend({
<style scoped> <style scoped>
.border-b { .border-b {
padding-bottom: 0; padding-bottom: 0;
border-bottom: 2px solid #666EED; border-bottom: 2px solid #35379F;
} }
</style> </style>
\ No newline at end of file
src/views/home/index.vue
View file @ 2bd06bbf
<template> <template>
<div class="flex flex-col"> <div class="home flex flex-col">
<banner ref="banner" :show-btn="showBtn" @showAttendForm="showAttendForm" :scrollHide="scrollHide" /> <banner ref="banner" :show-btn="showBtn" @showAttendForm="showAttendForm" :scrollHide="scrollHide" />
<attend-form :attendShow="attendShow" @submitForm="submitForm"/> <attend-form :attendShow="attendShow" @submitForm="submitForm"/>
<rank-list :isShow="isShow" :ranklist="rankList"/> <rank-list :isShow="isShow" :ranklist="rankList" @scrollEvent="scrollEvent"/>
</div> </div>
</template> </template>
...@@ -11,7 +11,7 @@ import Vue from "vue" ...@@ -11,7 +11,7 @@ import Vue from "vue"
import Banner from '@/components/home/Banner.vue' import Banner from '@/components/home/Banner.vue'
import AttendForm from '@/components/home/AttendForm.vue' import AttendForm from '@/components/home/AttendForm.vue'
import RankList from '@/components/home/RankList.vue' import RankList from '@/components/home/RankList.vue'
// import {TimelineLite, Power2} from 'gsap'
export default Vue.extend({ export default Vue.extend({
components: { components: {
Banner, Banner,
...@@ -21,6 +21,7 @@ export default Vue.extend({ ...@@ -21,6 +21,7 @@ export default Vue.extend({
name: "Home", name: "Home",
data() { data() {
return { return {
anima: null as any,
showBtn: true, showBtn: true,
attendShow: false, attendShow: false,
isShow: true, isShow: true,
...@@ -67,6 +68,9 @@ export default Vue.extend({ ...@@ -67,6 +68,9 @@ export default Vue.extend({
this.attendShow = v this.attendShow = v
this.showBtn = !v this.showBtn = !v
this.isShow = !v this.isShow = !v
const ref = this.$refs.banner as any
const dom = ref.$el as any
dom.style.height = 'auto'
}, },
submitForm(v : boolean) { submitForm(v : boolean) {
this.attendShow = v this.attendShow = v
...@@ -75,8 +79,35 @@ export default Vue.extend({ ...@@ -75,8 +79,35 @@ export default Vue.extend({
// request // request
// ... // ...
}, },
scrollEvent(v: boolean) {
setTimeout(() => {
this.scrollHide = v
}, 280)
const ref = this.$refs.banner as any
const dom = ref.$el as any
if (v) {
dom.style.height = '110px'
} else {
dom.style.height = '360px'
}
}
},
mounted() {
// const banner = this.$refs.banner as any
// const dom = banner.$el as any
// this.anima = new TimelineLite()
// this.anima.to(dom, 0, { css: { height: "360px"}, ease: Power2.easeInOut })
// this.anima.pause()
} }
}); });
</script> </script>
<style scoped>
.home {
background-image: url(../../assets/home/banner.png);
background-position-x: 50%;
background-position-y: 0%;
background-size: 100%;
background-repeat: no-repeat;
}
</style>
src/views/mine/AttendCommunity.vue 0 → 100644
View file @ 2bd06bbf
<template>
<div>
<div class="mt-16 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
<div class="px-4">
<community-card/>
</div>
</div>
<div class="mt-7 px-4">
<TicketBar :ticketNum="ticketNum" :cardStyle="2" />
</div>
<div class="px-4 mt-5 mb-20">
<h4 class="text-sm text-white mb-2">投票纪录</h4>
<ul class="text-sm">
<li v-for="(i, index) in list" :key="index" class="mb-2">
<ticket-record :hasTitle="false" />
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import TicketRecord from '@/components/mine/TicketRecord.vue'
export default Vue.extend({
components: {
CommunityCard,
TicketBar,
TicketRecord,
},
data() {
return {
ticketNum: 111,
list: [1,2,3,45,6,7]
}
}
})
</script>
\ No newline at end of file
src/views/mine/AttendProject.vue 0 → 100644
View file @ 2bd06bbf
<template>
<div>
<div class="mt-16 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
<div class="px-4">
<community-card/>
</div>
</div>
<div class="mt-7 px-4">
<TicketBar :ticketNum="ticketNum" :cardStyle="2" />
</div>
<div class="px-4 mt-5 mb-20">
<h4 class="text-sm text-white mb-2">投票纪录</h4>
<ul>
<li v-for="(i, index) in list" :key="index" class="mb-2">
<ticket-record :hasTitle="true" />
</li>
</ul>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import TicketRecord from '@/components/mine/TicketRecord.vue'
export default Vue.extend({
components: {
CommunityCard,
TicketBar,
TicketRecord,
},
data() {
return {
ticketNum: 111,
list: [1,2,3,45,6,7]
}
}
})
</script>
\ No newline at end of file
src/views/mine/MineEdit.vue
View file @ 2bd06bbf
<template> <template>
<div class="mine-edit"> <div class="mine-edit mt-16 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg px-4">
<p class="text-2xl">我的投票编辑</p>
<div class="text-line flex justify-between items-center">
<p class="text-sm">权限转让</p>
<span class="inline-block">
<app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
</span>
</div>
<div class="text-line flex justify-between items-center" @click="restart">
<p class="text-sm">重新发起投票</p>
<span class="inline-block">
<app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
</span>
</div>
<div class="text-line flex justify-between items-center">
<p class="text-sm">关闭投票</p>
<!-- <span class="inline-block"> -->
<van-switch v-model="checked" size="18px" @change="changeHandle"/>
<!-- </span> -->
</div>
</div> </div>
</template> </template>
\ No newline at end of file
<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
import { Switch, Dialog } from 'vant';
Vue.use(Switch);
Vue.use(Dialog);
export default Vue.extend({
components: {
AppIcon
},
data() {
return {
checked: true
}
},
methods: {
changeHandle(v: boolean) {
if (!v) return
Dialog.confirm({
title: '提示',
message: '确认关闭当前投票项目？关闭后，你的投票项目数据将清空。',
}).then(() => {
this.checked = true
// on confirm
}).catch(() => {
this.checked = false
// on cancel
});
},
restart() {
Dialog.confirm({
title: '提示',
message: '重新发起后，将会产生新的投票项目，当前发起的投票项目如果不用，建议关闭当前投票。',
}).then(() => {
this.$router.replace('/Initiate')
// on confirm
}).catch(() => {
// on cancel
});
}
}
})
</script>
<style scoped>
p {
margin-bottom: 0;
}
.mine-edit {
height: calc(100vh - 150px);
}
.text-line {
height: 60px;
border-bottom: 1px solid #35379F;
}
</style>
\ No newline at end of file
src/views/mine/MyCommunity.vue
View file @ 2bd06bbf
<template> <template>
<div class="my-community"> <div class="my-community">
<div class="w-full h-12 bg-app-drak-1 flex items-center fixed z-50">
<div class="w-8 h-8 text-white" @click="$router.back()">
<app-icon customize size="32px" type='icon-houtuishangyige'></app-icon>
</div>
</div>
<div class="mt-16 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
<div class="border-b px-4">
<community-card/>
</div>
<div class="mt-7 px-4">
<TicketBar :ticketNum="ticketNum" />
</div>
</div>
<div class="mb-20">
<h4 class="text-sm text-white text-center mt-7 mb-2 relative">投票人员详情</h4>
<div class="mx-4 border-2 border-app-blue-2 border-solid rounded-lg overflow-hidden">
<div class="list-title flex items-center justify-around text-xs">
<div>人员ID</div>
<div>票数</div>
<div>投票HASH</div>
</div>
<ul>
<li
v-for="item in list"
:key="item.id"
class="list-content leading-8 flex justify-around items-center text-xs">
<div class="">1NyER8tS...KDcL</div>
<div class="">50000000票</div>
<div class="">1NyER8tS...KDcL</div>
</li>
</ul>
</div>
</div>
</div> </div>
</template> </template>
\ No newline at end of file
<script lang="ts">
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import AppIcon from '@/components/common/Icon.vue'
import Vue from 'vue'
export default Vue.extend({
components: {
CommunityCard,
TicketBar,
AppIcon
},
data() {
return {
community: { id: 1 },
ticketNum: 22356,
list: [
1,2,3,4,5,6,7,8,9,0
]
}
}
})
</script>
<style scoped>
.border-b {
padding-bottom: 20px;
border-bottom: 2px solid #35379F;
}
.list-title {
width: 100%;
height: 40px;
line-height: 40px;
background: #252268;
}
.list-title>div {
flex: 1;
text-align: center
}
ul {
margin-bottom: 0;
}
</style>
\ No newline at end of file
src/views/mine/Transfer.vue 0 → 100644
View file @ 2bd06bbf
<template>
<div class="transfer mt-16 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg px-4">
<p class="text-2xl mb-4">权限转让</p>
<p class="text-sm opacity-60 mb-6">投票组只有管理员能进行投票发起以及成员地址和票数编辑，转让后将失去相应权限，请谨慎进行该操作</p>
<div class="text-line flex justify-between items-center mb-5">
<p class="text-sm mb-0">新管理员地址</p>
<span class="inline-block flex">
<img class="w-4 mr-7" src="@/assets/home/scan.png" alt="">
<img class="w-4" src="@/assets/home/person.png" alt="">
</span>
</div>
<div>
<input class="w-full h-10 rounded-lg mb-5 px-3 text-sm text-gray-600 x-input" placeholder="请输入新的管理员地址" />
</div>
<div>
<button class="w-full h-10 rounded-lg mt-5 mb-5 px-3 bg-btn text-lg tracking-widest">转让</button>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
})
</script>
<style scoped>
.transfer {
height: calc(100vh - 150px);
}
.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;
}
.bg-btn {
background: #6870F1;
}
</style>
\ No newline at end of file
src/views/mine/index.vue
View file @ 2bd06bbf
...@@ -2,10 +2,10 @@ ...@@ -2,10 +2,10 @@
<div class="mine"> <div class="mine">
<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-3 text-sm" :class="{ 'active': tab === 1 }" @click="tab = 1">我发起的</div> <div class="px-8 text-sm" :class="{ 'active': tab === 1 }" @click="getList(1)">我发起的</div>
<div class="px-3 text-sm" :class="{ 'active': tab === 2 }" @click="tab = 2">我参与的</div> <div class="px-8 text-sm" :class="{ 'active': tab === 2 }" @click="getList(2)">我参与的</div>
</div> </div>
<attend /> <attend :tab="tab" />
</div> </div>
</template> </template>
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
import Attend from '@/components/mine/Attend.vue' import Attend from '@/components/mine/Attend.vue'
import Vue from 'vue' import Vue from 'vue'
export default Vue.extend({ export default Vue.extend({
name: 'MinePage',
components: { components: {
Attend Attend
}, },
...@@ -20,6 +21,12 @@ export default Vue.extend({ ...@@ -20,6 +21,12 @@ export default Vue.extend({
return { return {
tab: 1 tab: 1
} }
},
methods: {
getList(v: number) {
this.tab = v
// ...code
}
} }
}) })
</script> </script>
...@@ -33,7 +40,19 @@ export default Vue.extend({ ...@@ -33,7 +40,19 @@ export default Vue.extend({
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.active { .active {
color: #FFBB00 color: #FFBB00;
position: relative;
}
.active::after {
content: '';
display: block;
width: 80px;
height: 2px;
background: linear-gradient(to right, #DE00A3, #FFBB00);
position: absolute;
bottom: -6px;
left: 21px;
z-index: 50;
} }
......
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