Skip to content

L
luckdraw2019
Commit 44d7502e by LinChengbiao
Options

完成

parent 9806389f
Showing with 382 additions and 33 deletions
README.md
# 2019
## 2018-2019年度颁奖页
> A Vue.js project
luckdraw2019
## Build Setup
---
``` bash
# install dependencies
npm install
## 启动项目
# serve with hot reload at localhost:8080
npm run dev
* clone 下来项目后先装好相关依赖
* `npm install`
# build for production with minification
npm run build
* 然后运行下面方法启动项目
* `npm run dev`
# build for production and view the bundle analyzer report
npm run build --report
---
# run unit tests
npm run unit
## 维护
# run e2e tests
npm run e2e
* 该项目为年度颁奖页面，无需后期维护
# run all tests
npm test
```
---
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
## 抽奖原理
* 抽奖页面为 `luckPrize.vue`。
* 将所有拥有抽奖资格的人(`this.members`)，制成卡片显示显示在页面上，开始抽奖后，将卡片翻转覆盖。
* 每张卡片的位置通过 `this.members` 下的属性 `sort` 计算得出。
* 洗牌时，利用 `Math.random` 方法生成随机数，从而改变 `sort` 影响 `this.members` 的排列顺序。
## 开发者
* QQ：1072907338 (林)
* Vx：lcb961212 (林)
package-lock.json
......@@ -886,6 +886,15 @@
"resolved": "http://registry.npm.taobao.org/aws4/download/aws4-1.8.0.tgz",
"integrity": "sha1-8OAD2cqef1nHpQiUXXsu+aBKVC8="
},
"axios": {
"version": "0.18.0",
"resolved": "http://registry.npm.taobao.org/axios/download/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "http://registry.npm.taobao.org/babel-code-frame/download/babel-code-frame-6.26.0.tgz",
......@@ -5077,7 +5086,6 @@
"version": "1.6.0",
"resolved": "http://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.6.0.tgz",
"integrity": "sha1-0SRSwDHoxn62Y32GG/x6gJAWeTM=",
"dev": true,
"requires": {
"debug": "=3.1.0"
},
......@@ -5086,7 +5094,6 @@
"version": "3.1.0",
"resolved": "http://registry.npm.taobao.org/debug/download/debug-3.1.0.tgz",
"integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
"dev": true,
"requires": {
"ms": "2.0.0"
}
......@@ -6654,8 +6661,7 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "http://registry.npm.taobao.org/is-buffer/download/is-buffer-1.1.6.tgz",
"integrity": "sha1-76ouqdqg16suoTqXsritUf776L4=",
"dev": true
"integrity": "sha1-76ouqdqg16suoTqXsritUf776L4="
},
"is-builtin-module": {
"version": "1.0.0",
......@@ -8475,8 +8481,7 @@
"ms": {
"version": "2.0.0",
"resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
},
"multicast-dns": {
"version": "6.2.3",
......
package.json
......@@ -14,6 +14,7 @@
"build": "node build/build.js"
},
"dependencies": {
"axios": "^0.18.0",
"node-sass": "^4.11.0",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
......
src/components/index/switch/home.vue
......@@ -40,11 +40,11 @@ export default {
},
pageTitle: [
'年度优秀员工',
'年度优秀主管',
'小组年度优秀员工',
'年度优秀负责人',
'年度优秀部门',
'部门优秀员工',
'最佳新人',
'运气奖'
'最佳新人奖',
'幸运奖'
]
}
}
......
src/components/index/switch/homepage/awardPage.vue
......@@ -5,6 +5,17 @@
<effect class="effect" :home-data="homeData" :page-title="pageTitle" />
<div class="content">
<!-- 年度优秀员工 -->
<excellent-employees-of-the-year v-if="homeData.page === 1" />
<!-- 小组年度优秀员工 -->
<excellent-employees-of-the-group-in-the-year v-if="homeData.page === 2" />
<!-- 年度优秀负责人 -->
<excellent-person-in-charge-of-the-year v-if="homeData.page === 3" />
<!-- 年度优秀部门 -->
<excellent-department-of-the-year v-if="homeData.page === 4" />
<!-- 最佳新人奖 -->
<best-new-artist v-if="homeData.page === 5" />
<!-- 幸运奖 -->
<lucky-prize v-if="homeData.page === 6" />
</div>
</div>
......@@ -15,11 +26,21 @@
<script>
import effect from './effect'
import luckyPrize from './prizePages/luckyPrize'
import excellentEmployeesOfTheYear from './prizePages/excellentEmployeesOfTheYear'
import excellentEmployeesOfTheGroupInTheYear from './prizePages/excellentEmployeesOfTheGroupInTheYear'
import excellentPersonInChargeOfTheYear from './prizePages/excellentPersonInChargeOfTheYear'
import bestNewArtist from './prizePages/bestNewArtist'
import excellentDepartmentOfTheYear from './prizePages/excellentDepartmentOfTheYear'
export default {
components: {
effect,
luckyPrize
luckyPrize,
excellentEmployeesOfTheYear,
excellentEmployeesOfTheGroupInTheYear,
excellentPersonInChargeOfTheYear,
bestNewArtist,
excellentDepartmentOfTheYear
},
props: {
homeData: {},
......
src/components/index/switch/homepage/prizePages/bestNewArtist.vue 0 → 100644
<template lang="html">
<div class="bestNewArtistVue">
<characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
</div>
</template>
<script>
import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
export default {
components: {
characterCard
},
data () {
return {
winners: [
'龚书浩',
'陈青',
'余琼'
]
}
}
}
</script>
<style lang="scss" scoped>
.bestNewArtistVue{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
.card{}
}
</style>
src/components/index/switch/homepage/prizePages/characterCard.vue 0 → 100644
<template lang="html">
<div class="characterCardVue">
<!-- 卡片 -->
<div class="cardWrap" :class="{ 'active': show }" @click="show = !show">
<!-- 卡片正面 -->
<div class="positive">
<div class="avatarWrap">
<div class="avatar" :style="{ 'background-image': `url(static/img/avatar/${name}.png)` }"></div>
<div class="lace"></div>
</div>
<p class="name">{{ name }}</p>
</div>
<!-- 卡片反面 -->
<div class="negative"></div>
</div>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
}
},
data () {
return {
show: false
}
}
}
</script>
<style lang="scss" scoped>
.characterCardVue{
transform-style: preserve-3d;
/*! autoprefixer: off */
perspective: 800px;
/* autoprefixer: on */
.cardWrap{
position: relative;
width: 300px;
height: 460px;
transform-style: preserve-3d;
transform: rotateY(-180deg);
transition: all 1s ease;
&.active{
transform: rotateY(0deg);
}
.positive, .negative{
position: absolute;
width: 100%;
height: 100%;
background-color: #1A1C36;
border-radius: 6px;
transform-style: preserve-3d;
overflow: hidden;
}
// 卡片正面
.positive{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: url('~static/img/font-bg.png');
background-repeat: no-repeat;
background-size: contain;
background-position: 8px 267px;
box-shadow: 0 0 40px rgba(61, 201, 249, .5);
.avatarWrap{
margin: 85px 0;
position: relative;
.avatar, .lace{
position: absolute;
background-size: calc(100% + 10px * 2);
background-repeat: no-repeat;
background-position: center center;
transform: translate(-50%, -50%);
}
.avatar{
width: calc(165px * .9);
height: calc(165px * .9);
border-radius: 50%;
box-shadow: 0 0 40px #3ECDFD;
}
.lace{
width: calc(165px * 1.8);
height: calc(165px * 1.8);
background-image: url('~static/img/lace.png');
top: 30px;
left: -3px;
}
}
.name{
color: #3ECDFD;
font-size: 30px;
margin-top: 100px;
text-shadow: 0 0 8px currentColor;
}
}
// 卡片反面
.negative{
transform: rotateY(180deg) translateZ(1px);
background-image: url('~static/img/card-bg2.gif');
background-repeat: no-repeat;
background-size: cover;
background-position: calc(50% + 11px) center;
}
}
}
</style>
src/components/index/switch/homepage/prizePages/excellentDepartmentOfTheYear.vue 0 → 100644
<template lang="html">
<div class="excellentDepartmentOfTheYearVue">
<characterCard name="腾讯组" />
</div>
</template>
<script>
import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
export default {
components: {
characterCard
}
}
</script>
<style lang="scss" scoped>
.excellentDepartmentOfTheYearVue{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
.card{}
}
</style>
src/components/index/switch/homepage/prizePages/excellentEmployeesOfTheGroupInTheYear.vue 0 → 100644
<template lang="html">
<div class="excellentEmployeesOfTheGroupInTheYearVue">
<characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
</div>
</template>
<script>
import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
export default {
components: {
characterCard
},
data () {
return {
winners: [
'陈晋豪',
'周琴',
'章航嘉',
'胡旭倩',
'沈晓慧',
'叶鑫'
]
}
}
}
</script>
<style lang="scss" scoped>
.excellentEmployeesOfTheGroupInTheYearVue{
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
.card{
width: 33.33%;
display: flex;
justify-content: center;
transform: scale(.7);
&:nth-of-type(n + 4){
margin-top: -120px;
}
}
}
</style>
src/components/index/switch/homepage/prizePages/excellentEmployeesOfTheYear.vue 0 → 100644
<template lang="html">
<div class="excellentEmployeesOfTheYearVue">
<characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
</div>
</template>
<script>
import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
export default {
components: {
characterCard
},
data () {
return {
winners: [
'沈涛',
'叶敏霞',
'王佳艳'
]
}
}
}
</script>
<style lang="scss" scoped>
.excellentEmployeesOfTheYearVue{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
.card{}
}
</style>
src/components/index/switch/homepage/prizePages/excellentPersonInChargeOfTheYear.vue 0 → 100644
<template lang="html">
<div class="excellentPersonInChargeOfTheYearVue">
<characterCard class="card" v-for="(n, i) in winners" :key="i" :name="n" />
</div>
</template>
<script>
import characterCard from '@/components/index/switch/homepage/prizePages/characterCard'
export default {
components: {
characterCard
},
data () {
return {
winners: [
'陈秋平'
]
}
}
}
</script>
<style lang="scss" scoped>
.excellentPersonInChargeOfTheYearVue{
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
.card{}
}
</style>
src/components/index/switch/homepage/prizePages/luckyCard.vue
......@@ -29,8 +29,11 @@ export default {
},
methods: {
egg (name) {
// 文字彩蛋，中奖时会显示在名字后面
let eggs = {
'林程彪': '实锤 (๑•ㅂ•́)و✧'
'林程彪': '实锤？！ Σ(っ °Д °;)っ',
'钟志苗': '感谢CCTV!',
'龚书浩': 'emmmmmmmmmm？'
}
if (eggs[name]) {
return name + '：' + eggs[name]
......
src/components/index/switch/homepage/prizePages/luckyPrize.vue
......@@ -11,6 +11,11 @@
:style="n.style"
@luck-draw="luckDraw" />
<p class="settings" v-if="isStartBtn">
<span>抽取名额</span>
<input type="number" min="1" max="6" v-model="luckyQuota">
</p>
<span class="startBtn" @click="start()" v-if="isStartBtn">开始洗牌</span>
</div>
......@@ -27,7 +32,7 @@ export default {
data () {
return {
canDraw: false, // 是否可以翻牌
luckyQuota: 3, // 中奖名额
luckyQuota: 6, // 中奖名额
isShowList: false,
speedList: [
1500,
......@@ -170,6 +175,16 @@ export default {
.luckyCard{
position: absolute;
}
.settings{
position: absolute;
bottom: 55px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
input{
width: 40px;
}
}
.startBtn{
position: absolute;
bottom: 0px;
......
src/main.js
......@@ -7,9 +7,12 @@ import 'static/css/style.ini.css'
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
/* eslint-disable no-new */
new Vue({
el: '#app',
......
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