wanglin
/
vote_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

对接完成，样式调整完成，头像图片还未添加

yjt_vue
ting 5 months ago
parent
45fc3d800b
commit
13a8137910
3 changed files with 143 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/assets/main.css
  2. 6
      src/views/BackView.vue
  3. 197
      src/views/FrontView.vue

4
src/assets/main.css
View File

@ -24,9 +24,9 @@
}
}
/* 平板 */
@media (min-width: 750px) and (max-width:1280px){
@media (min-width: 750px) and (max-width:1279px){
html{
font-size: 18px;
font-size: 2.5vw;
}
div{
font-size: 1rem;

6
src/views/BackView.vue
View File

@ -21,11 +21,15 @@ function searchDetail(scope){
details.value = result.data;
})
}
//序号
const indexMethod = function(index) {
return index +1;
}
</script>
<template>
<el-table class="table" :data="candidates" style="width: 100%">
<el-table-column prop="id" label="序号" width="180" />
<el-table-column type="index" :index="indexMethod" label="序号" width="180" />
<el-table-column prop="name" label="候选人姓名" width="180" />
<el-table-column prop="votes" label="获得票数" />
<el-table-column label="操作">

197
src/views/FrontView.vue
View File

@ -6,8 +6,29 @@ import { ref } from 'vue';
//候选人
const candidates = ref([])
const first = ref();
first.value = {
id: 1,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100,
voted: false
}
const second = ref();
second.value = {
id: 2,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100,
voted: false
}
const third = ref();
third.value = {
id: 3,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100,
voted: false
}
//后七名
const backCandidates = ref([
{
@ -15,48 +36,55 @@ const backCandidates = ref([
name: "tom",
avatar: "../assets/头像框.png",
votes: 100,
status: 0
voted: true
},
{
id: 5,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
votes: 100,
voted: true
},
{
id: 6,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
votes: 100,
voted: true
}
,
{
id: 7,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
votes: 100,
voted: false
},
{
id: 8,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
votes: 100,
voted: true
},
{
id: 9,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
votes: 100,
voted: true
},
{
id: 10,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
votes: 100,
voted: false
}
])
let key = 10017;
//加载候选人
function loadCandidates(jwcode) {
CanApi.getCandidates(jwcode).then(result => {
@ -73,14 +101,14 @@ function loadCandidates(jwcode) {
console.log("第二个候选人：", second.value);
console.log("第三个候选人：", third.value);
console.log("后七名候选人：", backCandidates.value);
console.log("候选人：", backCandidates.value);
})
}
loadCandidates(10015);
loadCandidates(key);
//投票
const voter = ref({
jwCode: 10015,
jwCode: key,
candidateJwCode: 20010,
name: "小辉"
})
@ -93,9 +121,10 @@ function vote(code) {
if (result.code == 10000) {
ElMessage.success(result.msg);
loadCandidates(10013);
loadCandidates(key);
} else {
ElMessage.error(result.msg)
loadCandidates(key);
}
})
}
@ -137,10 +166,10 @@ function vote(code) {
<!-- 头像图片 -->
<img class="cover2" src="../assets/image.png">
<!-- 投票按钮 -->
<div class="one-button2" v-if="second.votes==false" @click="vote(first.jwCode)">投票</div>
<div class="one-button2" v-if="second.voted == false" @click="vote(second.jwCode)">投票</div>
<div class="buttoned2" v-else @click="vote(second.jwCode)">已投票</div>
<!-- 有多少人投票 -->
<div class="votes2">已有{{second.votes}}人投票</div>
<div class="votes2">已有{{ second.votes }}人投票</div>
<!-- 排名2 -->
<div class="num2"></div>
</div>
@ -149,11 +178,12 @@ function vote(code) {
<!-- 头像框 -->
<div class="avatar-box1"></div>
<!-- 头像图片 -->
<img class="cover1" src="../assets/image.png">
<!-- 投票按钮 -->
<div class="one-button1" v-if="first.votes==false" @click="vote(first.jwCode)">投票</div>
<div class="one-button1" v-if="first.voted == false" @click="vote(first.jwCode)">投票</div>
<div class="buttoned1" v-else @click="vote(first.jwCode)">已投票</div>
<!-- 有多少人投票 -->
<div class="votes1">已有{{first.votes}}人投票</div>
<div class="votes1">已有{{ first.votes }}人投票</div>
<!-- 排名1 -->
<div class="num1"></div>
</div>
@ -162,11 +192,12 @@ function vote(code) {
<!-- 头像框 -->
<div class="avatar-box3"></div>
<!-- 头像图片 -->
<img class="cover3" src="../assets/image.png">
<!-- 投票按钮 -->
<div class="one-button3" v-if="third.votes==false" @click="vote(third.jwCode)">投票</div>
<div class="one-button3" v-if="third.voted == false" @click="vote(third.jwCode)">投票</div>
<div class="buttoned3" v-else @click="vote(third.jwCode)">已投票</div>
<!-- 有多少人投票 -->
<div class="votes3">已有{{third.votes}}人投票</div>
<div class="votes3">已有{{ third.votes }}人投票</div>
<!-- 排名1 -->
<div class="num3"></div>
</div>
@ -175,18 +206,18 @@ function vote(code) {
<!-- 后七名循环列表 -->
<div class="rand-box">
<div class="list" v-for="(backCandidate,index) in backCandidates" :key="index">
<div class="list" v-for="(backCandidate, index) in backCandidates" :key="index">
<!-- 排名 -->
<div class="num">{{ index+4 }}</div>
<div class="num">{{ index + 4 }}</div>
<!-- 头像 -->
<img class="list-avatar" :src="backCandidate.avatar">
<img class="list-avatar" src="../assets/image.png">
<!-- 投票数 -->
<div class="votes">已有{{ backCandidate.votes }}人投票</div>
<!-- 投票按钮 -->
<div class="list-button1" v-if="backCandidate.voted==false" @click="vote(backCandidate.jwCode)">投票</div>
<div class="list-button1" v-if="backCandidate.voted == false" @click="vote(backCandidate.jwCode)">投票</div>
<div class="list-button2" v-else @click="vote(backCandidate.jwCode)">已投票</div>
</div>
</div>
<div class="footer">-以上数据截至至2024.12.28-</div>
</div>
@ -224,7 +255,8 @@ function vote(code) {
}
}
@media (max-width:750px){
@media (max-width:750px) {
.container {
background-image: url('../assets/bg.png');
background-repeat: no-repeat;
@ -306,35 +338,38 @@ function vote(code) {
height: 30%;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
margin-top: 25%;
}
.yiersan{
.yiersan {
margin-top: 9%;
width: 100%;
}
.avatar-box2 {
background-image: url(../assets/头像框.png);
position: absolute;
background-size: contain;
background-repeat: no-repeat;
left: 9%;
top: -9%;
top: -8%;
width: 25%;
height: 20%;
}
.cover2{
.cover2 {
position: absolute;
left: 11.5%;
top: -5.5%;
width: 20%;
height: 14%;
top: -6%;
width: 19%;
height: 12%;
border-radius: 50%;
}
.one-button2 {
position: absolute;
left: 9%;
top: 5%;
top: 3%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
@ -344,13 +379,16 @@ function vote(code) {
font-weight: 700;
font-size: 1.4rem;
color: #E8160C;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.buttoned2{
.buttoned2 {
position: absolute;
left: 9%;
top: 5%;
top: 3%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
@ -358,15 +396,18 @@ function vote(code) {
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: #EEEEEE;
color: #999999;
}
.votes2 {
position: absolute;
left: 11%;
top: 9%;
top: 7%;
width: 25%;
height: 3%;
font-family: Alibaba PuHuiTi;
@ -384,7 +425,7 @@ function vote(code) {
height: 15%;
position: absolute;
left: 14%;
top: 15%;
top: 12%;
/* z-index: 999; */
}
@ -395,31 +436,44 @@ function vote(code) {
background-repeat: no-repeat;
position: absolute;
left: 38%;
top: -12%;
top: -11%;
width: 25%;
height: 20%;
}
.cover1 {
position: absolute;
left: 41%;
top: -9.5%;
width: 19%;
height: 12%;
border-radius: 50%;
}
.one-button1 {
position: absolute;
left: 39%;
top: 2%;
top: 0%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
background: linear-gradient(81deg, #FFE89C, #FFC040);
border: #FA765D solid 2px;
display: flex;
justify-content: center;
align-items: center;
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
color: #E8160C;
text-align: center;
cursor: pointer;
}
.buttoned1{
.buttoned1 {
position: absolute;
left: 39%;
top: 2%;
top: 0%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
@ -427,7 +481,9 @@ function vote(code) {
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: #EEEEEE;
color: #999999;
@ -436,8 +492,8 @@ function vote(code) {
.votes1 {
position: absolute;
left: 43.5%;
top: 6%;
left: 43%;
top: 4%;
width: 25;
height: 3;
font-family: Alibaba PuHuiTi;
@ -453,7 +509,7 @@ function vote(code) {
background-repeat: no-repeat;
position: absolute;
left: 47%;
top: 12%;
top: 9.5%;
width: 5%;
height: 15%;
/* z-index: 999; */
@ -465,16 +521,25 @@ function vote(code) {
background-repeat: no-repeat;
position: absolute;
left: 68%;
top: -9%;
top: -8%;
width: 25%;
height: 20%;
}
.cover3 {
position: absolute;
left: 71%;
top: -6%;
width: 19%;
height: 12%;
border-radius: 50%;
}
.one-button3 {
position: absolute;
left: 69%;
top: 5%;
top: 3%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
@ -484,13 +549,16 @@ function vote(code) {
font-weight: 700;
font-size: 1.4rem;
color: #E8160C;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.buttoned3{
.buttoned3 {
position: absolute;
left: 69%;
top: 5%;
top: 3%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
@ -498,15 +566,18 @@ function vote(code) {
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
background: #EEEEEE;
color: #999999;
}
.votes3 {
position: absolute;
left: 70.5%;
top: 9%;
left: 72%;
top: 7%;
width: 25%;
height: 3%;
font-family: Alibaba PuHuiTi;
@ -523,7 +594,7 @@ function vote(code) {
background-repeat: no-repeat;
position: absolute;
left: 75%;
top: 15%;
top: 12%;
width: 7%;
height: 15%;
/* z-index: 999; */
@ -579,7 +650,7 @@ function vote(code) {
height: 18%;
border-radius: 50%;
/* 圆形头像 */
/* margin-right: 2%; */
margin-right: 2%;
}
.votes {
@ -612,11 +683,14 @@ function vote(code) {
font-weight: 700;
font-size: 1.3rem;
color: #E8160C;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 1%;
margin-right: 2%;
margin-right: 4%;
}
.list-button2{
.list-button2 {
background: #EEEEEE;
color: #999999;
border: #FA765D solid 2px;
@ -630,11 +704,12 @@ function vote(code) {
/* 文字 */
font-weight: 700;
font-size: 1.3rem;
text-align: center;
letter-spacing: 1%;
margin-right: 2%;
margin-right: 4%;
}
.list-button:hover {
background-color: #e6b800;
/* 鼠标悬停时的背景颜色 */

Write Preview
Loading…
Cancel
Save