Skip to content

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

首页

parent 2e2137cb
Hide whitespace changes
Inline Side-by-side
Showing with 459 additions and 11 deletions
src/components/home/Activity.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="c-activity flex flex-col">
<h5 class="text-center text-lg font-medium pt-2 pb-3">发动活动</h5>
<div class="flex-grow mx-4 py-5 px-4 rounded-xl border border-app-blue-3 border-solid">
<div class="flex justify-between items-center pb-2.5">
<p class="text-sm font-medium">投票开始时间</p>
<div class="flex items-center">
≈
<span class="inline-block px-1">{{0}}</span>
月
<span class="inline-block px-1">{{0}}</span>
日
<img class="w-4 h-4 flex-shrink-0 ml-2" src="@/assets/home/date-icon.png" alt="" />
</div>
</div>
<div class="relative">
<Input
class="w-full h-10 rounded-lg text-sm px-3 text-gray-600"
type="text"
placeholder="请输入开始区块"
@focus="startShow = false"
@blur="startShow = true"
v-model="activityForm.start" />
<p v-show="startShow" class="absolute right-3 top-1/2 z-50 text-gray-400 text-sm transform -translate-y-1/2">当前区块 345678</p>
</div>
<div class="flex justify-between items-center py-2.5">
<p class="text-sm font-medium">投票结束时间</p>
<div class="flex items-center">
≈
<span class="inline-block px-1">{{0}}</span>
月
<span class="inline-block px-1">{{0}}</span>
日
<img class="w-4 h-4 flex-shrink-0 ml-2" src="@/assets/home/date-icon.png" alt="" />
</div>
</div>
<div class="relative">
<Input
class="w-full h-10 rounded-lg text-sm px-3 text-gray-600"
type="text"
placeholder="请输入结束区块"
@focus="endShow = false"
@blur="endShow = true"
v-model="activityForm.end" />
<p v-show="endShow" class="absolute right-3 top-1/2 z-50 text-gray-400 text-sm transform -translate-y-1/2">当前区块 345678</p>
</div>
<div class="flex justify-between items-center py-2.5">
<p class="text-sm font-medium">每人参与次数设置</p>
<div class="flex items-center" @click="show">
{{ joinTimes }}
</div>
</div>
<div class="flex justify-between items-center">
<p class="text-sm font-medium">是否公开投票</p>
<div class="flex items-center">
<!-- <Switch @change="changeHandle" /> -->
</div>
</div>
</div>
<div class="mx-4">
<btn text="发起活动" />
</div>
</div>
</template>
<script lang="ts">
import Btn from '@/components/common/Btn.vue'
import { Input } from 'ant-design-vue'
import Vue from 'vue'
export default Vue.extend({
components: {
Btn,
Input
},
data() {
return {
activityForm: {
start: '',
end: '',
isPublic: true
},
startShow: true,
endShow: true,
joinTimes: '每天一次'
}
},
methods: {
show() {
},
changeHandle(v:boolean) {
console.log(v)
}
}
})
</script>
<style scoped>
.c-activity {
height: calc(100vh - 65px);
}
</style>
\ No newline at end of file
src/components/home/AttendForm.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="flex flex-col attend-form px-4" v-show="attendShow">
<div class="px-4 py-5 border-2 border-app-blue-3 border-solid rounded-lg">
<p class="text-sm mb-2.5">社区名称</p>
<div>
<Input class="w-full h-10 rounded-lg mb-5 px-3 text-gray-600" placeholder="请输入社区名称" v-model="communityName" />
</div>
<p class="text-sm mb-2.5">社区简介</p>
<div>
<Input type="textarea" class="w-full h-40 rounded-lg px-3 pt-2 text-gray-600" placeholder="这里写社区描述简介（500字以内）" v-model="intro" />
</div>
</div>
<button class="mt-5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="submit">提交</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Input } from 'ant-design-vue'
export default Vue.extend({
name: 'AttendForm',
components: {
Input
},
props: {
attendShow: {
type: Boolean,
default: false
}
},
data() {
return {
communityName: '',
intro: ''
}
},
methods: {
submit() {
if (!this.communityName || !this.intro) {
//
console.log(1)
} else {
//
this.$emit('submitForm', false)
}
}
}
})
</script>
<style scoped>
input, button, textarea {
outline: none;
}
</style>
\ No newline at end of file
src/components/home/Banner.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="home-banner">
<div v-if="showBtn" class="mt-56 flex flex-col items-center justify-center">
<button
v-if="canAttend"
class="apply-btn text-center text-xs font-medium rounded 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>
<div class="px-8">
<timebox times="1633304684145" />
</div>
</div>
</div>
</template>
<script lang="ts">
import Timebox from '@/components/Timebox.vue'
import Vue from 'vue'
export default Vue.extend({
components: { Timebox },
name: 'HomeBanner',
data() {
return {
voteType: 1,
canAttend: true
}
},
props: {
showBtn: {
type: Boolean,
default: true
},
},
methods: {
attendActivity() {
this.$emit('showAttendForm', true)
}
}
})
</script>
<style scoped>
.home-banner {
min-height: 280px;
background-image: url(../../assets/home/banner.png);
background-position-x: 50%;
background-position-y: 0%;
background-size: 100%;
background-repeat: no-repeat;
}
.apply-btn {
width: 100px;
height: 30px;
/* margin-top: 210px; */
background: #4EE8F1;
color: #110E4E;
}
</style>
\ No newline at end of file
src/components/home/CommunityCard.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="community-card">
<p class="text-2xl mb-2">社区名称</p>
<div class="mb-5 flex items-center justify-between">
<p class="text-xs text-white opacity-80">ID:1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0</p>
<span class="inline-block w-5 h-5 bg-app-blue-3 rounded-2xl"></span>
</div>
<p class="text-sm text-white opacity-60 mb-2">社区简介</p>
<p class="text-xs leading-5 relative" @click="goDetails">
这里是简短介绍，50字以内，详细点连接查看，这里是项目文字介绍，这里是项目文字介绍，字介绍，这里是项目文字介绍，这里是项目文字介绍是项目文字介绍。
</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
community: {
type: Object
}
},
methods: {
goDetails() {
this.$router.push({ path: '/details', query: { id: this.community.id }})
}
}
})
</script>
\ No newline at end of file
src/components/home/RankList.vue 0 → 100644
View file @ 0d05ac20
<template>
<div v-show="isShow" class="rank-list relative mt-7 w-full px-4">
<div>
</div>
<div class="rank-title absolute left-1/2 -top-4 transform -translate-x-1/2">
<p class="text-center text-lg leading-10">排行榜</p>
</div>
<div class="rank-lines mb-20 pt-10 px-3 flex items-center border-2 border-app-blue-3 border-solid rounded-lg" style="background: rgb(25,2,92)">
<div v-if="ranklist.length > 0" class="">
<router-link v-for="item in ranklist" :key="item.id" :to="{ path: '/CommunityVote', query: { id: item.id }}">
<Cardtwo class="mb-2.5" />
</router-link>
</div>
<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">
<p class="text-sm text-center mt-3">暂无报名!</p>
</div>
</div>
</div>
</template>
<script lang="ts">
import Cardtwo from '@/components/Card_two.vue'
import Vue from 'vue'
export default Vue.extend({
components: { Cardtwo },
name: 'RankList',
props: {
ranklist: {
type: Array
},
isShow: {
type: Boolean,
default: true
}
}
})
</script>
<style scoped>
.rank-title {
width: 220px;
height: 40px;
/* line-height: 40px; */
background-image: url(../../assets/home/rank-title.png);
background-size: 100%;
background-repeat: no-repeat;
}
.rank-lines {
min-height: 460px;
}
</style>
\ No newline at end of file
src/components/home/TimeLine.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="timing w-full h-10 leading-10 mt-3 px-5 text-xs tracking-wider">
<template v-if="voteType">
离{{ voteType }}还有
<span class="w-16 h-7 inline-block bg-app-blue-2 text-center text-sm leading-7 rounded">{{ height }}</span>
个区块
≈<span>4</span>天<span>4</span>小时<span>4</span>分<span>4</span>秒
</template>
<template v-else>
投票已结束
</template>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
height: {
type: Number
}
},
data() {
return {
voteType: '投票结束'
}
}
})
</script>
\ No newline at end of file
src/layouts/navigator.vue
View file @ 0d05ac20
<template> <template>
<div class="flex fixed w-full justify-around bg-app-blue-1 " :class="getPosition"> <div class="flex fixed w-full justify-around bg-app-blue-1 z-50" :class="getPosition">
<div v-for="(i,index) in navRoutes" :key="index" class="py-3 flex flex-col text-center " @click="navigating(i,index)"> <div v-for="(i,index) in navRoutes" :key="index" class="py-3 flex flex-col text-center " @click="navigating(i,index)">
<div class="self-center"> <div class="self-center">
<app-icon customize :type='i.meta.icon' size='20px' :color='index===activedIndex?"text-app-yellow-1":" text-white"'></app-icon> <app-icon customize :type='i.meta.icon' size='20px' :color='index===activedIndex?"text-app-yellow-1":" text-white"'></app-icon>
......
src/router/index.ts
View file @ 0d05ac20
...@@ -17,7 +17,24 @@ export const routes: Array<RouteConfig> = [ ...@@ -17,7 +17,24 @@ export const routes: Array<RouteConfig> = [
meta:{ meta:{
text: '英雄版', text: '英雄版',
icon: 'icon-yingxiongbang' icon: 'icon-yingxiongbang'
} },
children: [
{
path: '/',
name: 'Home',
component: ()=>import('@/views/home/index.vue'),
},
{
path: '/CommunityVote',
name: 'CommunityVote',
component: ()=>import('@/views/home/CommunityVote.vue'),
},
{
path: '/Details',
name: 'Details',
component: ()=>import('@/views/home/Details.vue'),
}
]
}, },
{ {
path: '/Square', path: '/Square',
......
src/views/Home.vue
View file @ 0d05ac20
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
首页 <router-view />
</div> </div>
</template> </template>
...@@ -8,13 +8,6 @@ ...@@ -8,13 +8,6 @@
import Vue from "vue" import Vue from "vue"
export default Vue.extend({ export default Vue.extend({
name: "Home", name: "Home"
data() {
return {
};
},
}); });
</script> </script>
src/views/home/CommunityVote.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="community-vote">
<div class="vote-header">
<div @click="$router.back()">houtui</div>
</div>
<time-line :height="height" />
<div class="mt-3 mx-4 px-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
<CommunityCard />
</div>
</div>
</template>
<script lang="ts">
import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import Vue from 'vue'
export default Vue.extend({
components: {
TimeLine,
CommunityCard
},
name: 'CommunityVote',
data() {
return {
height: 12070
}
}
})
</script>
<style scoped>
.timing {
background: rgba(255, 255, 255, 0.2);
}
</style>
\ No newline at end of file
src/views/home/Details.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="details"></div>
</template>
\ No newline at end of file
src/views/home/index.vue 0 → 100644
View file @ 0d05ac20
<template>
<div class="flex flex-col">
<banner :show-btn="showBtn" @showAttendForm="showAttendForm" />
<attend-form :attendShow="attendShow" @submitForm="submitForm"/>
<rank-list :isShow="isShow" :ranklist="rankList" />
</div>
</template>
<script lang="ts">
import Vue from "vue"
import Banner from '@/components/home/Banner.vue'
import AttendForm from '@/components/home/AttendForm.vue'
import RankList from '@/components/home/RankList.vue'
export default Vue.extend({
components: {
Banner,
AttendForm,
RankList
},
name: "Home",
data() {
return {
showBtn: true,
attendShow: false,
isShow: true,
rankList: [
{
id: 1
},
{
id: 2
},
{
id: 3
},
{
id: 4
},
{
id: 5
},
]
};
},
methods: {
showAttendForm(v : boolean) {
this.attendShow = v
this.showBtn = !v
this.isShow = !v
},
submitForm(v : boolean) {
this.attendShow = v
this.showBtn = !v
this.isShow = !v
// request
// ...
}
}
});
</script>
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