|
|
|
@ -0,0 +1,423 @@ |
|
|
|
<script setup> |
|
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
const candidates = ref([]); |
|
|
|
//后七名 |
|
|
|
const backCandidates = ref([ |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
name:"tom", |
|
|
|
avatar:"../assets/头像框.png", |
|
|
|
votes:100 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
name:"tom", |
|
|
|
avatar:"../assets/头像框.png", |
|
|
|
votes:100 |
|
|
|
} |
|
|
|
|
|
|
|
]) |
|
|
|
//加载候选人 |
|
|
|
function loadCandidates() { |
|
|
|
candidates.value = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
|
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
<div class="container"> |
|
|
|
<!-- 上半部分内容 --> |
|
|
|
<div class="header"> |
|
|
|
<div class="channle"> |
|
|
|
<span class="channle-write">Homily Chart 第一频道</span> |
|
|
|
</div> |
|
|
|
<div class="title"> |
|
|
|
</div> |
|
|
|
<!-- 投票规则 --> |
|
|
|
<div class="rules"></div> |
|
|
|
<div class="rules-content"> |
|
|
|
每人每天最多可以投三票<br> |
|
|
|
当天不可重复投一个人<br> |
|
|
|
统计累计票数最多的三个人 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<!-- 排名信息 --> |
|
|
|
<div class="content"> |
|
|
|
<!-- 第一名 --> |
|
|
|
<div class="first"> |
|
|
|
<!-- 头像框 --> |
|
|
|
<div class="avatar-box1"></div> |
|
|
|
<!-- 头像图片 --> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="one-button1">投票</div> |
|
|
|
<!-- 有多少人投票 --> |
|
|
|
<div class="votes1">已有500人投票</div> |
|
|
|
<!-- 排名1 --> |
|
|
|
<div class="num1"></div> |
|
|
|
</div> |
|
|
|
<!-- 第二名 --> |
|
|
|
<div class="second"> |
|
|
|
<!-- 头像框 --> |
|
|
|
<div class="avatar-box2"></div> |
|
|
|
<!-- 头像图片 --> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="one-button2">投票</div> |
|
|
|
<!-- 有多少人投票 --> |
|
|
|
<div class="votes2">已有400人投票</div> |
|
|
|
<!-- 排名1 --> |
|
|
|
<div class="num2"></div> |
|
|
|
</div> |
|
|
|
<!-- 第三名 --> |
|
|
|
<div class="third"> |
|
|
|
<!-- 头像框 --> |
|
|
|
<div class="avatar-box3"></div> |
|
|
|
<!-- 头像图片 --> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="one-button3">投票</div> |
|
|
|
<!-- 有多少人投票 --> |
|
|
|
<div class="votes3">已有400人投票</div> |
|
|
|
<!-- 排名1 --> |
|
|
|
<div class="num3"></div> |
|
|
|
</div> |
|
|
|
<!-- 一二三 --> |
|
|
|
<div class="yes"></div> |
|
|
|
<!-- 后七名循环列表 --> |
|
|
|
<div class="rand-box"> |
|
|
|
<div class="list" |
|
|
|
v-for="backCandidate in backCandidates"> |
|
|
|
<!-- 排名 --> |
|
|
|
<div class="num">{{ backCandidate.id }}</div> |
|
|
|
<!-- 头像 --> |
|
|
|
<img class="list-avatar" |
|
|
|
src="../assets/头像框.png"> |
|
|
|
<!-- 投票数 --> |
|
|
|
<div class="votes">已有{{backCandidate.votes}}人投票</div> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="list-button">投票</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
/* 手机 */ |
|
|
|
/* @media (max-width:750px) { |
|
|
|
.container { |
|
|
|
background-image: url('../assets/bg.png'); |
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
/* 平板 */ |
|
|
|
/* @media (min-width: 750px) and (max-width:1280px) { |
|
|
|
.container { |
|
|
|
background-image: url('../assets/bg.png'); |
|
|
|
} |
|
|
|
} */ |
|
|
|
|
|
|
|
/* @media (min-width:1280px) { */ |
|
|
|
.container { |
|
|
|
background-image: url('../assets/bg@2x.png'); |
|
|
|
/* background-size: 100% 100%; */ |
|
|
|
background-size: contain; |
|
|
|
width: 750px; |
|
|
|
height: 2048px; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.header { |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
.channle { |
|
|
|
position: relative; |
|
|
|
background-image: url(../assets/top.png); |
|
|
|
width: 425px; |
|
|
|
height: 80px; |
|
|
|
margin: auto; |
|
|
|
overflow: visible; |
|
|
|
/* background: linear-gradient(90deg, #FFE89C, #FFFBF2); */ |
|
|
|
} |
|
|
|
|
|
|
|
.channle-write { |
|
|
|
color: #FFFFFF; |
|
|
|
font-weight: 1000; |
|
|
|
width: 344px; |
|
|
|
height: 34px; |
|
|
|
font-size: 30px; |
|
|
|
line-height: 20.06px; |
|
|
|
border-width: 3px; |
|
|
|
|
|
|
|
text-shadow: 2px 2px 2px #F14509, -2px -1px 2px #F14509, 1px -1px 2px #F14509, -2px 3px 2px #F14509; |
|
|
|
position: absolute; |
|
|
|
/* 添加这一行 */ |
|
|
|
top: 50%; |
|
|
|
/* 垂直居中 */ |
|
|
|
left: 55%; |
|
|
|
/* 水平居中 */ |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
/* 调整位置 */ |
|
|
|
} |
|
|
|
|
|
|
|
.title { |
|
|
|
background-image: url(../assets/寻找队医.png); |
|
|
|
width: 691px; |
|
|
|
height: 180px; |
|
|
|
position: absolute; |
|
|
|
left: 34px; |
|
|
|
top: 122px; |
|
|
|
} |
|
|
|
|
|
|
|
.rules { |
|
|
|
background-image: url(../assets/投票规则.png); |
|
|
|
width: 297.12px; |
|
|
|
height: 54.94px; |
|
|
|
position: absolute; |
|
|
|
left: 226.44px; |
|
|
|
top: 317.59px; |
|
|
|
} |
|
|
|
|
|
|
|
.rules-content { |
|
|
|
position: absolute; |
|
|
|
left: 205px; |
|
|
|
top: 389px; |
|
|
|
width: 343px; |
|
|
|
height: 98px; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 700; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
/* margin: auto; */ |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.yes { |
|
|
|
background-image: url(../assets/前三.png); |
|
|
|
height: 237px; |
|
|
|
width: 698px; |
|
|
|
position: absolute; |
|
|
|
left: 26px; |
|
|
|
top: 707px; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-box1 { |
|
|
|
background-image: url(../assets/头像框.png); |
|
|
|
position: absolute; |
|
|
|
left: 278px; |
|
|
|
top: 501px; |
|
|
|
width: 188px; |
|
|
|
height: 192px; |
|
|
|
} |
|
|
|
|
|
|
|
.one-button1 { |
|
|
|
position: absolute; |
|
|
|
left: 294.31px; |
|
|
|
top: 653.53px; |
|
|
|
width: 155.66px; |
|
|
|
height: 41.56px; |
|
|
|
border-radius: 20px 20px 20px 20px; |
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 700; |
|
|
|
font-size: 24px; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.votes1 { |
|
|
|
position: absolute; |
|
|
|
left: 279px; |
|
|
|
top: 700px; |
|
|
|
width: 191px; |
|
|
|
height: 28px; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 700; |
|
|
|
color: #E84E07; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.num1 { |
|
|
|
background-image: url(../assets/1.png); |
|
|
|
position: absolute; |
|
|
|
left: 351px; |
|
|
|
top: 779px; |
|
|
|
width: 37px; |
|
|
|
height: 88px; |
|
|
|
/* z-index: 999; */ |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-box2 { |
|
|
|
background-image: url(../assets/头像框.png); |
|
|
|
position: absolute; |
|
|
|
left: 41px; |
|
|
|
top: 556px; |
|
|
|
width: 188px; |
|
|
|
height: 192px; |
|
|
|
} |
|
|
|
|
|
|
|
.one-button2 { |
|
|
|
position: absolute; |
|
|
|
left: 57.31px; |
|
|
|
top: 708.53px; |
|
|
|
width: 155.66px; |
|
|
|
height: 41.56px; |
|
|
|
border-radius: 20px 20px 20px 20px; |
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 700; |
|
|
|
font-size: 24px; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.votes2 { |
|
|
|
position: absolute; |
|
|
|
left: 55px; |
|
|
|
top: 759px; |
|
|
|
width: 170px; |
|
|
|
height: 23px; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 700; |
|
|
|
color: #E84E07; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.num2 { |
|
|
|
background-image: url(../assets/2.png); |
|
|
|
position: absolute; |
|
|
|
left: 112px; |
|
|
|
top: 825px; |
|
|
|
width: 45px; |
|
|
|
height: 66px; |
|
|
|
/* z-index: 999; */ |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-box3 { |
|
|
|
background-image: url(../assets/头像框.png); |
|
|
|
position: absolute; |
|
|
|
left: 519px; |
|
|
|
top: 556px; |
|
|
|
width: 188px; |
|
|
|
height: 192px; |
|
|
|
} |
|
|
|
|
|
|
|
.one-button3 { |
|
|
|
position: absolute; |
|
|
|
left: 535.31px; |
|
|
|
top: 708.53px; |
|
|
|
width: 155.66px; |
|
|
|
height: 41.56px; |
|
|
|
border-radius: 20px 20px 20px 20px; |
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 700; |
|
|
|
font-size: 24px; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.votes3 { |
|
|
|
position: absolute; |
|
|
|
left: 535px; |
|
|
|
top: 759px; |
|
|
|
width: 170px; |
|
|
|
height: 23px; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-size: 24px; |
|
|
|
font-weight: 700; |
|
|
|
color: #E84E07; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.num3 { |
|
|
|
background-image: url(../assets/3.png); |
|
|
|
position: absolute; |
|
|
|
left: 566px; |
|
|
|
top: 825px; |
|
|
|
width: 47px; |
|
|
|
height: 67px; |
|
|
|
/* z-index: 999; */ |
|
|
|
} |
|
|
|
|
|
|
|
.rand-box { |
|
|
|
background-color: #FFFFFF; |
|
|
|
border: #F14509 solid 2px; |
|
|
|
border-radius: 27.78px 27.78px 27.78px 27.78px; |
|
|
|
position: absolute; |
|
|
|
left: 42.8px; |
|
|
|
top: 922.56px; |
|
|
|
width: 666.06px; |
|
|
|
height: 1016.75px; |
|
|
|
/* box-shadow: 3px 8px 19px 0 #66f1291f; */ |
|
|
|
box-shadow: 9px 9px 19px -9px #F1291F40; |
|
|
|
} |
|
|
|
.list{ |
|
|
|
display: flex; |
|
|
|
/* display: inline-block; */ |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-left: 20px; |
|
|
|
padding: 10px; |
|
|
|
border-bottom: 1px solid #B24300; |
|
|
|
} |
|
|
|
|
|
|
|
.num{ |
|
|
|
font-family: zihunxingmouhei_trial; |
|
|
|
font-size: 26px; /* 排名字体大小 */ |
|
|
|
font-weight: 800; /* 排名字体加粗 */ |
|
|
|
color: #F4850D; |
|
|
|
margin-right: 18px; /* 与头像之间的间距 */ |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
.list-avatar { |
|
|
|
width: 98.13px; |
|
|
|
height: 98.13px; |
|
|
|
border-radius: 50%; /* 圆形头像 */ |
|
|
|
margin-right: 35px; /* 与投票数之间的间距 */ |
|
|
|
} |
|
|
|
|
|
|
|
.votes { |
|
|
|
font-size: 28px; /* 投票数字体大小 */ |
|
|
|
font-weight: 400; |
|
|
|
width: 190px; |
|
|
|
height: 27px; |
|
|
|
flex-grow: 1; /* 填充剩余空间 */ |
|
|
|
|
|
|
|
color: #F4850D; /* 投票数字体颜色 */ |
|
|
|
margin-right: 20px; /* 与投票按钮之间的间距 */ |
|
|
|
} |
|
|
|
|
|
|
|
.list-button { |
|
|
|
|
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
width: 143.88px; |
|
|
|
height: 48.4px; |
|
|
|
border-radius: 24.15px 24.15px 24.15px 24.15px; |
|
|
|
cursor: pointer; /* 鼠标悬停时的指针样式 */ |
|
|
|
transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */ |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 800; |
|
|
|
font-size: 26px; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 7px; |
|
|
|
} |
|
|
|
|
|
|
|
.list-button:hover { |
|
|
|
background-color: #e6b800; /* 鼠标悬停时的背景颜色 */ |
|
|
|
} |
|
|
|
/* } */ |
|
|
|
</style> |
ting
5 months ago
