|
|
|
@ -1,4 +1,6 @@ |
|
|
|
<script setup> |
|
|
|
import CanApi from '@/api/CanApi'; |
|
|
|
import { ElMessage } from 'element-plus'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
|
|
|
|
const candidates = ref([]); |
|
|
|
@ -8,7 +10,9 @@ const backCandidates = ref([ |
|
|
|
id: 4, |
|
|
|
name:"tom", |
|
|
|
avatar:"../assets/头像框.png", |
|
|
|
votes:100 |
|
|
|
votes:100, |
|
|
|
status:0 |
|
|
|
|
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
@ -19,58 +23,80 @@ const backCandidates = ref([ |
|
|
|
|
|
|
|
]) |
|
|
|
//加载候选人 |
|
|
|
function loadCandidates() { |
|
|
|
candidates.value = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
|
|
|
|
function loadCandidates(jwcode) { |
|
|
|
CanApi.getCandidates(jwcode).then(result =>{ |
|
|
|
backCandidates.value = result.data; |
|
|
|
console.log("候选人：",backCandidates.value); |
|
|
|
}) |
|
|
|
} |
|
|
|
loadCandidates(10013); |
|
|
|
//投票 |
|
|
|
const voter = ref({ |
|
|
|
jwCode: 10013, |
|
|
|
candidateJwCode: 20010, |
|
|
|
name: "小辉" |
|
|
|
}) |
|
|
|
function vote(code){ |
|
|
|
console.log("code:",code) |
|
|
|
voter.value.candidateJwCode = code; |
|
|
|
console.log("voter:",voter.value) |
|
|
|
// voter.value.voterJwcode,voter.value.candidateJwcode,voter.value.voterName |
|
|
|
CanApi.Vote(voter.value).then(result =>{ |
|
|
|
|
|
|
|
if(result.code == 10000){ |
|
|
|
ElMessage.success(result.msg); |
|
|
|
loadCandidates(10013); |
|
|
|
}else{ |
|
|
|
ElMessage.error(result.msg) |
|
|
|
} |
|
|
|
] |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
</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 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="second"> |
|
|
|
<!-- 头像框 --> |
|
|
|
<div class="avatar-box1"></div> |
|
|
|
<div class="avatar-box2"></div> |
|
|
|
<!-- 头像图片 --> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="one-button1">投票</div> |
|
|
|
<div class="one-button2">投票</div> |
|
|
|
<!-- 有多少人投票 --> |
|
|
|
<div class="votes1">已有500人投票</div> |
|
|
|
<!-- 排名1 --> |
|
|
|
<div class="num1"></div> |
|
|
|
<div class="votes2">已有500人投票</div> |
|
|
|
<!-- 排名2 --> |
|
|
|
<div class="num2"></div> |
|
|
|
</div> |
|
|
|
<!-- 第二名 --> |
|
|
|
<!-- 第一名 --> |
|
|
|
<div class="second"> |
|
|
|
<!-- 头像框 --> |
|
|
|
<div class="avatar-box2"></div> |
|
|
|
<div class="avatar-box1"></div> |
|
|
|
<!-- 头像图片 --> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="one-button2">投票</div> |
|
|
|
<div class="one-button1" @click="">投票</div> |
|
|
|
<!-- 有多少人投票 --> |
|
|
|
<div class="votes2">已有400人投票</div> |
|
|
|
<div class="votes1">已有400人投票</div> |
|
|
|
<!-- 排名1 --> |
|
|
|
<div class="num2"></div> |
|
|
|
<div class="num1"></div> |
|
|
|
</div> |
|
|
|
<!-- 第三名 --> |
|
|
|
<div class="third"> |
|
|
|
@ -86,6 +112,8 @@ function loadCandidates() { |
|
|
|
</div> |
|
|
|
<!-- 一二三 --> |
|
|
|
<div class="yes"></div> |
|
|
|
|
|
|
|
|
|
|
|
<!-- 后七名循环列表 --> |
|
|
|
<div class="rand-box"> |
|
|
|
<div class="list" |
|
|
|
@ -94,11 +122,15 @@ function loadCandidates() { |
|
|
|
<div class="num">{{ backCandidate.id }}</div> |
|
|
|
<!-- 头像 --> |
|
|
|
<img class="list-avatar" |
|
|
|
src="../assets/头像框.png"> |
|
|
|
:src="backCandidate.avatar" |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
> |
|
|
|
<!-- 投票数 --> |
|
|
|
<div class="votes">已有{{backCandidate.votes}}人投票</div> |
|
|
|
<!-- 投票按钮 --> |
|
|
|
<div class="list-button">投票</div> |
|
|
|
<div class="list-button" @click="vote(backCandidate.jwCode)">投票</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -106,40 +138,69 @@ function loadCandidates() { |
|
|
|
</template> |
|
|
|
<style scoped> |
|
|
|
/* 手机 */ |
|
|
|
/* @media (max-width:750px) { |
|
|
|
@media (max-width:750px) { |
|
|
|
.container { |
|
|
|
background-image: url('../assets/bg.png'); |
|
|
|
} |
|
|
|
} */ |
|
|
|
background-image: url('../assets/bg.png'); |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
position: relative; |
|
|
|
background-size: cover; /* 背景图片覆盖整个容器 */ |
|
|
|
background-repeat: no-repeat; /* 防止背景图片重复 */ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* 平板 */ |
|
|
|
/* @media (min-width: 750px) and (max-width:1280px) { |
|
|
|
@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; |
|
|
|
background-image: url('../assets/bg.png'); |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 100%; |
|
|
|
height: 100vw; |
|
|
|
background-size:100% 100%; |
|
|
|
background-attachment:fixed; |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
/* 电脑 */ |
|
|
|
@media (min-width:1280px) { |
|
|
|
.container { |
|
|
|
background-image: url('../assets/bg.png'); |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 40%; |
|
|
|
height: 100vw; |
|
|
|
background-size:100% 100%; |
|
|
|
/* background-attachment:fixed; */ |
|
|
|
margin-left: auto; |
|
|
|
margin-right: auto; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.header { |
|
|
|
position: relative; |
|
|
|
height: 35%; |
|
|
|
} |
|
|
|
.content{ |
|
|
|
position: relative; |
|
|
|
height: 65%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
.channle { |
|
|
|
position: relative; |
|
|
|
background-image: url(../assets/top.png); |
|
|
|
width: 425px; |
|
|
|
height: 80px; |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 58%; |
|
|
|
height: 28%; |
|
|
|
margin: auto; |
|
|
|
overflow: visible; |
|
|
|
/* background: linear-gradient(90deg, #FFE89C, #FFFBF2); */ |
|
|
|
@ -148,18 +209,16 @@ function loadCandidates() { |
|
|
|
.channle-write { |
|
|
|
color: #FFFFFF; |
|
|
|
font-weight: 1000; |
|
|
|
width: 344px; |
|
|
|
height: 34px; |
|
|
|
font-size: 30px; |
|
|
|
line-height: 20.06px; |
|
|
|
width: 90%; |
|
|
|
height: 90%; |
|
|
|
font-size: 1.4rem; |
|
|
|
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%; |
|
|
|
left: 56%; |
|
|
|
/* 水平居中 */ |
|
|
|
transform: translate(-50%, -50%); |
|
|
|
/* 调整位置 */ |
|
|
|
@ -167,30 +226,36 @@ function loadCandidates() { |
|
|
|
|
|
|
|
.title { |
|
|
|
background-image: url(../assets/寻找队医.png); |
|
|
|
width: 691px; |
|
|
|
height: 180px; |
|
|
|
width: 90%; |
|
|
|
height: 80%; |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 34px; |
|
|
|
top: 122px; |
|
|
|
left: 7%; |
|
|
|
top: 16%; |
|
|
|
/* transform: scale(0.8) translateY(-50%); */ |
|
|
|
} |
|
|
|
|
|
|
|
.rules { |
|
|
|
background-image: url(../assets/投票规则.png); |
|
|
|
width: 297.12px; |
|
|
|
height: 54.94px; |
|
|
|
width: 40%; |
|
|
|
height: 30%; |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-size: contain; |
|
|
|
position: absolute; |
|
|
|
left: 226.44px; |
|
|
|
top: 317.59px; |
|
|
|
left: 29%; |
|
|
|
top: 43%; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.rules-content { |
|
|
|
position: absolute; |
|
|
|
left: 205px; |
|
|
|
top: 389px; |
|
|
|
left:16%; |
|
|
|
top: 52%; |
|
|
|
width: 343px; |
|
|
|
height: 98px; |
|
|
|
color: #FFFFFF; |
|
|
|
font-size: 24px; |
|
|
|
font-size: 1.1rem; |
|
|
|
font-weight: 700; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
/* margin: auto; */ |
|
|
|
@ -199,166 +264,198 @@ function loadCandidates() { |
|
|
|
|
|
|
|
.yes { |
|
|
|
background-image: url(../assets/前三.png); |
|
|
|
height: 237px; |
|
|
|
width: 698px; |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 90%; |
|
|
|
height: 30%; |
|
|
|
position: absolute; |
|
|
|
left: 26px; |
|
|
|
top: 707px; |
|
|
|
left: 5%; |
|
|
|
top: 0%; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-box1 { |
|
|
|
.avatar-box2 { |
|
|
|
background-image: url(../assets/头像框.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 278px; |
|
|
|
top: 501px; |
|
|
|
width: 188px; |
|
|
|
height: 192px; |
|
|
|
left: 6%; |
|
|
|
top: -13%; |
|
|
|
width: 25%; |
|
|
|
height: 20%; |
|
|
|
} |
|
|
|
|
|
|
|
.one-button1 { |
|
|
|
.one-button2 { |
|
|
|
position: absolute; |
|
|
|
left: 294.31px; |
|
|
|
top: 653.53px; |
|
|
|
width: 155.66px; |
|
|
|
height: 41.56px; |
|
|
|
left: 7%; |
|
|
|
top: -0.5%; |
|
|
|
width: 22%; |
|
|
|
height: 3.5%; |
|
|
|
border-radius: 20px 20px 20px 20px; |
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 700; |
|
|
|
font-size: 24px; |
|
|
|
font-size: 1.4rem; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.votes1 { |
|
|
|
.votes2 { |
|
|
|
position: absolute; |
|
|
|
left: 279px; |
|
|
|
top: 700px; |
|
|
|
width: 191px; |
|
|
|
height: 28px; |
|
|
|
left: 10%; |
|
|
|
top: 3.5%; |
|
|
|
width: 25%; |
|
|
|
height: 3%; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-size: 24px; |
|
|
|
font-size: 1rem; |
|
|
|
font-weight: 700; |
|
|
|
color: #E84E07; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.num1 { |
|
|
|
background-image: url(../assets/1.png); |
|
|
|
.num2 { |
|
|
|
background-image: url(../assets/2.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 351px; |
|
|
|
top: 779px; |
|
|
|
width: 37px; |
|
|
|
height: 88px; |
|
|
|
left: 17%; |
|
|
|
top: 9%; |
|
|
|
width: 7%; |
|
|
|
height: 15%; |
|
|
|
/* z-index: 999; */ |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-box2 { |
|
|
|
|
|
|
|
.avatar-box1 { |
|
|
|
background-image: url(../assets/头像框.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 41px; |
|
|
|
top: 556px; |
|
|
|
width: 188px; |
|
|
|
height: 192px; |
|
|
|
left: 38%; |
|
|
|
top: -18%; |
|
|
|
width: 25%; |
|
|
|
height: 20%; |
|
|
|
} |
|
|
|
|
|
|
|
.one-button2 { |
|
|
|
.one-button1 { |
|
|
|
position: absolute; |
|
|
|
left: 57.31px; |
|
|
|
top: 708.53px; |
|
|
|
width: 155.66px; |
|
|
|
height: 41.56px; |
|
|
|
left: 38.5%; |
|
|
|
top: -5%; |
|
|
|
width: 22%; |
|
|
|
height: 3.5%; |
|
|
|
border-radius: 20px 20px 20px 20px; |
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 700; |
|
|
|
font-size: 24px; |
|
|
|
font-size: 1.4rem; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.votes2 { |
|
|
|
.votes1 { |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
left: 55px; |
|
|
|
top: 759px; |
|
|
|
width: 170px; |
|
|
|
height: 23px; |
|
|
|
left: 40%; |
|
|
|
top: -1%; |
|
|
|
width: 25; |
|
|
|
height: 3; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-size: 24px; |
|
|
|
font-size: 1rem; |
|
|
|
font-weight: 700; |
|
|
|
color: #E84E07; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.num2 { |
|
|
|
background-image: url(../assets/2.png); |
|
|
|
.num1 { |
|
|
|
background-image: url(../assets/1.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 112px; |
|
|
|
top: 825px; |
|
|
|
width: 45px; |
|
|
|
height: 66px; |
|
|
|
left: 46%; |
|
|
|
top: 7%; |
|
|
|
width: 5%; |
|
|
|
height: 15%; |
|
|
|
/* z-index: 999; */ |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-box3 { |
|
|
|
background-image: url(../assets/头像框.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 519px; |
|
|
|
top: 556px; |
|
|
|
width: 188px; |
|
|
|
height: 192px; |
|
|
|
left: 69%; |
|
|
|
top: -13.5%; |
|
|
|
width: 25%; |
|
|
|
height: 20%; |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
|
|
position: absolute; |
|
|
|
left: 70.5%; |
|
|
|
top: -0.5%; |
|
|
|
width: 22%; |
|
|
|
height: 3.5%; |
|
|
|
border-radius: 20px 20px 20px 20px; |
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 700; |
|
|
|
font-size: 1.4rem; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
|
|
|
|
.votes3 { |
|
|
|
position: absolute; |
|
|
|
left: 535px; |
|
|
|
top: 759px; |
|
|
|
width: 170px; |
|
|
|
height: 23px; |
|
|
|
left: 70.5%; |
|
|
|
top: 3.5%; |
|
|
|
width: 25%; |
|
|
|
height: 3%; |
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
font-size: 24px; |
|
|
|
font-size: 1rem; |
|
|
|
font-weight: 700; |
|
|
|
color: #E84E07; |
|
|
|
z-index: 999; |
|
|
|
} |
|
|
|
|
|
|
|
.num3 { |
|
|
|
|
|
|
|
background-image: url(../assets/3.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
position: absolute; |
|
|
|
left: 566px; |
|
|
|
top: 825px; |
|
|
|
width: 47px; |
|
|
|
height: 67px; |
|
|
|
left: 75%; |
|
|
|
top: 9%; |
|
|
|
width: 7%; |
|
|
|
height: 15%; |
|
|
|
/* z-index: 999; */ |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.yes { |
|
|
|
background-image: url(../assets/前三.png); |
|
|
|
background-size: contain; |
|
|
|
background-repeat: no-repeat; |
|
|
|
width: 90%; |
|
|
|
height: 30%; |
|
|
|
position: absolute; |
|
|
|
left: 5%; |
|
|
|
top: 0%; |
|
|
|
} |
|
|
|
.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; |
|
|
|
left: 5%; |
|
|
|
top: 18%; |
|
|
|
width: 90%; |
|
|
|
height: auto; |
|
|
|
/* height: 70%; */ |
|
|
|
/* box-shadow: 3px 8px 19px 0 #66f1291f; */ |
|
|
|
box-shadow: 9px 9px 19px -9px #F1291F40; |
|
|
|
} |
|
|
|
@ -366,58 +463,61 @@ function loadCandidates() { |
|
|
|
display: flex; |
|
|
|
/* display: inline-block; */ |
|
|
|
align-items: center; |
|
|
|
margin-top: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-left: 20px; |
|
|
|
padding: 10px; |
|
|
|
margin-top: 3%; |
|
|
|
/* margin-bottom: 10px; */ |
|
|
|
margin-left: 4%; |
|
|
|
padding: 2%; |
|
|
|
border-bottom: 1px solid #B24300; |
|
|
|
} |
|
|
|
|
|
|
|
.num{ |
|
|
|
font-family: zihunxingmouhei_trial; |
|
|
|
font-size: 26px; /* 排名字体大小 */ |
|
|
|
font-size: 1.625rem; /* 排名字体大小 */ |
|
|
|
font-weight: 800; /* 排名字体加粗 */ |
|
|
|
color: #F4850D; |
|
|
|
margin-right: 18px; /* 与头像之间的间距 */ |
|
|
|
margin-right: 8%; /* 与头像之间的间距 */ |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
.list-avatar { |
|
|
|
width: 98.13px; |
|
|
|
height: 98.13px; |
|
|
|
width: 20%; |
|
|
|
height: 18%; |
|
|
|
border-radius: 50%; /* 圆形头像 */ |
|
|
|
margin-right: 35px; /* 与投票数之间的间距 */ |
|
|
|
/* margin-right: 2%; */ |
|
|
|
} |
|
|
|
|
|
|
|
.votes { |
|
|
|
font-size: 28px; /* 投票数字体大小 */ |
|
|
|
font-size: 1.2rem; /* 投票数字体大小 */ |
|
|
|
font-weight: 400; |
|
|
|
width: 190px; |
|
|
|
height: 27px; |
|
|
|
flex-grow: 1; /* 填充剩余空间 */ |
|
|
|
|
|
|
|
color: #F4850D; /* 投票数字体颜色 */ |
|
|
|
margin-right: 20px; /* 与投票按钮之间的间距 */ |
|
|
|
/* margin-right: 2%; */ |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.list-button { |
|
|
|
|
|
|
|
background: linear-gradient(81deg, #FFE89C, #FFC040); |
|
|
|
border: #FA765D solid 2px; |
|
|
|
width: 143.88px; |
|
|
|
height: 48.4px; |
|
|
|
width: 22%; |
|
|
|
height: 10%; |
|
|
|
border-radius: 24.15px 24.15px 24.15px 24.15px; |
|
|
|
cursor: pointer; /* 鼠标悬停时的指针样式 */ |
|
|
|
transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */ |
|
|
|
/* 文字 */ |
|
|
|
font-weight: 800; |
|
|
|
font-size: 26px; |
|
|
|
font-weight: 700; |
|
|
|
font-size: 1.3rem; |
|
|
|
color: #E8160C; |
|
|
|
text-align: center; |
|
|
|
letter-spacing: 7px; |
|
|
|
letter-spacing: 1%; |
|
|
|
margin-right: 2%; |
|
|
|
} |
|
|
|
|
|
|
|
.list-button:hover { |
|
|
|
background-color: #e6b800; /* 鼠标悬停时的背景颜色 */ |
|
|
|
} |
|
|
|
/* } */ |
|
|
|
|
|
|
|
|
|
|
|
</style> |
ting
5 months ago