Skip to content

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

英雄榜

parent 73f90e66
Expand all Show whitespace changes
Inline Side-by-side
Showing with 295 additions and 32 deletions
package-lock.json deleted 100644 → 0
View file @ 73f90e66
This source diff could not be displayed because it is too large. You can view the blob instead.
public/iconfont.js
View file @ 1ebe86c4
This diff is collapsed.
src/assets/home/banner.png
View replaced file @ 73f90e66 View file @ 1ebe86c4
src/assets/home/banner.png

172 KB | W: | H:

src/assets/home/banner.png

144 KB | W: | H:

src/assets/home/banner.png
src/assets/home/banner.png
src/assets/home/banner.png
src/assets/home/banner.png
  • 2-up
  • Swipe
  • Onion skin
src/components/home/AttendForm.vue
View file @ 1ebe86c4
<template>
<div class="flex flex-col attend-form px-4" v-show="attendShow">
<div class="flex flex-col attend-form px-4 mb-20" 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" />
<Input class="w-full h-10 rounded-lg mb-5 px-3 text-gray-600 x-input" 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" />
<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" />
</div>
</div>
<button class="mt-5 py-2 bg-app-blue-2 text-center text-sm font-medium rounded-lg" @click="submit">提交</button>
......@@ -41,6 +41,8 @@ export default Vue.extend({
console.log(1)
} else {
//
this.communityName = ''
this.intro = ''
this.$emit('submitForm', false)
}
}
......@@ -52,4 +54,19 @@ export default Vue.extend({
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.4);
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 @ 1ebe86c4
<template>
<div class="home-banner">
<div v-if="showBtn" class="mt-56 flex flex-col items-center justify-center">
<div v-if="showBtn" class="mt-6 w-full flex flex-col items-center justify-center">
<img class="w-60" src="@/assets/home/banner-img.png" alt="">
<button
v-if="canAttend"
class="apply-btn text-center text-xs font-medium rounded mb-4"
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>
<div class="px-8">
<timebox times="1633304684145" />
<Timebox times="1633304684145" />
</div>
<div class="mt-3 w-full px-6">
<Input class="xs-input" placeholder="请输入社区名称/ID" @pressEnter="search">
<div slot="addonAfter" @click="search">
<app-icon customize size="20px" type='icon-sousuo'></app-icon>
</div>
</Input>
</div>
</div>
</div>
</template>
<script lang="ts">
import Timebox from '@/components/Timebox.vue'
import Vue from 'vue'
import Timebox from '@/components/Timebox.vue'
import AppIcon from '@/components/common/Icon.vue'
import { Input } from 'ant-design-vue'
export default Vue.extend({
components: { Timebox },
components: {
Timebox,
AppIcon,
Input
},
name: 'HomeBanner',
data() {
return {
voteType: 1,
canAttend: true
canAttend: false
}
},
props: {
......@@ -37,14 +51,17 @@ export default Vue.extend({
methods: {
attendActivity() {
this.$emit('showAttendForm', true)
},
search() {
console.log('run')
}
}
})
</script>
<style scoped>
<style lang="css" scoped>
.home-banner {
min-height: 280px;
min-height: 240px;
background-image: url(../../assets/home/banner.png);
background-position-x: 50%;
background-position-y: 0%;
......@@ -58,4 +75,28 @@ export default Vue.extend({
background: #4EE8F1;
color: #110E4E;
}
>>> .ant-input {
width: 100%;
height: 35px;
color: #fff;
border-radius: 40px;
font-size: 12px;
border: 1px solid #5053CE;
border-right: none;
background: transparent;
outline: none;
}
>>> .ant-input-group-addon {
height: 35px;
border: 1px solid #5053CE;
border-left: none;
border-radius: 0 40px 40px 0;
background: transparent;
}
input {
outline: none;
}
</style>
\ No newline at end of file
src/components/home/CommunityCard.vue
View file @ 1ebe86c4
......@@ -2,22 +2,35 @@
<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>
<p class="text-xs text-white opacity-80 mb-0">ID:1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0</p>
<span class="inline-block w-5 h-5 bg-app-blue-3 rounded-2xl flex items-center justify-center">
<app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
</span>
</div>
<p class="text-sm text-white opacity-60 mb-2">社区简介</p>
<p class="text-xs leading-5 relative" @click="goDetails">
这里是简短介绍，50字以内，详细点连接查看，这里是项目文字介绍，这里是项目文字介绍，字介绍，这里是项目文字介绍，这里是项目文字介绍是项目文字介绍。
<p v-if="showIntro" class="text-sm text-white opacity-60 mb-2">社区简介</p>
<p v-if="showIntro" class="text-xs leading-5 relative mb-0" @click="goDetails">
这里是简短介绍，50字以内，详细点连接查看，这里是项目文字介绍，这里是项目文字介绍
<span class="inline-block absolute right-1 bottom-0.5">
<app-icon customize type='icon-arrow-right-copy-copy'></app-icon>
</span>
</p>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({
components: {
AppIcon
},
props: {
community: {
type: Object
},
showIntro: {
type: Boolean,
default: true
}
},
methods: {
......
src/components/home/TicketBar.vue 0 → 100644
View file @ 1ebe86c4
<template>
<div class="ticket-bar flex relative">
<template v-if="$route.path === '/CommunityVote'">
<div class="w-1/3 relative bg-blue rounded-lg flex-grow-0">
<img class="w-14 absolute left-1/2 transform -translate-x-1/2 bottom-2" src="@/assets/home/ticket.png" alt="">
</div>
<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-xs mb-0">当前票数( 票 )</p>
</div>
</template>
<template v-else>
<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="">
</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">
<p class="text-3xl mb-0">{{ ticketNum }}</p>
<p class="text-xs mb-0 opacity-50">当前票数( 票 )</p>
</div>
</template>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
props: {
ticketNum: {
type: Number
}
}
})
</script>
<style scoped>
.ticket-bar {
height: 58px;
}
.line {
width: 1px;
height: 49px;
background: #594CE8;
}
.bg-blue {
background: #4B53C9;
}
.bg-blue-dark {
background: #322A82;
}
</style>
\ No newline at end of file
src/components/home/TimeLine.vue
View file @ 1ebe86c4
<template>
<div class="timing w-full h-10 leading-10 mt-3 px-5 text-xs tracking-wider">
<div class="timing w-full h-10 leading-10 mt-3 px-4 text-xs">
<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 class="w-14 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>
......@@ -27,3 +27,9 @@ export default Vue.extend({
}
})
</script>
<style scoped>
.timing {
background: rgba(255, 255, 255, 0.2);
}
</style>
\ No newline at end of file
src/components/timebox.vue
View file @ 1ebe86c4
......@@ -2,19 +2,19 @@
<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>
<p class="text text-xs mx-1">天</p>
<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>
<p class="text text-xs mx-1">时</p>
<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>
<p class="text text-xs mx-1">分</p>
<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>
<p class="text text-xs mx-1">秒</p>
<p class="text text-xs mx-1 mb-0">秒</p>
</div>
</div>
......
src/views/home/CommunityVote.vue
View file @ 1ebe86c4
<template>
<div class="community-vote">
<div class="vote-header">
<div @click="$router.back()">houtui</div>
<div class="community-vote mb-16">
<div class="vote-header 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 class="pt-10">
<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 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" />
</div>
<div class="pt-7 px-4">
<div class="mb-5">
<TicketBar :ticketNum="ticketNum" />
</div>
<Input class="x-input" placeholder="请输入投票数量" v-model="useNum" @input="checkInput" />
<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-xs" @click="inAll">全部填入</p>
</div>
</div>
</div>
<div class="px-4 mt-5">
<button class="w-full vote-btn h-10 leading-10 text-center text-sm rounded-lg">{{ voteText }}</button>
</div>
</div>
</template>
......@@ -13,23 +32,70 @@
<script lang="ts">
import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import AppIcon from '@/components/common/Icon.vue'
import { Input } from 'ant-design-vue'
import Vue from 'vue'
export default Vue.extend({
components: {
TimeLine,
CommunityCard
CommunityCard,
TicketBar,
AppIcon,
Input
},
name: 'CommunityVote',
data() {
return {
height: 12070
height: 12070,
ticketNum: 22202,
rest: 2121,
useNum: '',
community: {
id: 1
},
testList: [
],
voteText: '投票'
}
},
methods: {
inAll() {
this.useNum = this.rest + ''
},
checkInput() {
if (!parseInt(this.useNum)) {
this.useNum = ''
return
}
const num = +this.useNum
if (num > this.rest) {
this.useNum = this.rest + ''
}
this.useNum = parseInt(this.useNum) + ''
}
}
})
</script>
<style scoped>
.timing {
background: rgba(255, 255, 255, 0.2);
.border-b {
padding-bottom: 20px;
border-bottom: 2px solid #666EED;
}
.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.4);
box-shadow: 0px 3px 4px 0px #BCB3DC inset;
}
.vote-btn {
background: #6870F1;
}
</style>
\ No newline at end of file
src/views/home/Details.vue
View file @ 1ebe86c4
<template>
<div class="details"></div>
<div class="details mb-20">
<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 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 class="pt-7 px-4">
<div class="mb-5">
<TicketBar :ticketNum="ticketNum" />
</div>
<div>
<p class="opacity-80 text-sm">社区简介</p>
<p class="text-xs font-medium leading-6 opacity-80">这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({
components: {
TimeLine,
CommunityCard,
TicketBar,
AppIcon
},
data() {
return {
height: 12070,
ticketNum: 22202,
community: {
id: 1
}
}
}
})
</script>
<style scoped>
.border-b {
padding-bottom: 0;
border-bottom: 2px solid #666EED;
}
</style>
\ No newline at end of file
yarn.lock
View file @ 1ebe86c4
This source diff could not be displayed because it is too large. You can view the blob instead.
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