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

样式适配不同终端

yjt_vue
ting 5 months ago
parent
69da68acc7
commit
45fc3d800b
5 changed files with 363 additions and 230 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/image.png
  2. 24
      src/assets/main.css
  3. 4
      src/views/BackView.vue
  4. 561
      src/views/FrontView.vue
  5. 4
      vite.config.js

BIN
src/assets/image.png
View File

Side by Side

After

Width: 45  |  Height: 36  |  Size: 3.3 KiB

24
src/assets/main.css
View File

@ -1,7 +1,3 @@
/* html,body{
width: 100vw;
height: 100vh;
} */
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -9,18 +5,19 @@
html{ html{
font-size: 1vw; font-size: 1vw;
} }
html,body{
background-size: cover;
background-attachment: fixed;
width: 100vw;
}
div{ div{
font-size: 1rem; font-size: 1rem;
} }
/* html,body{
height: 100%;
}
#app{
height: 100%;
} */
/* 手机 */ /* 手机 */
@media (max-width:750px){ @media (max-width:750px){
html{ html{
font-size: 14px;
font-size: 10.5px;
} }
div{ div{
font-size: 1rem; font-size: 1rem;
@ -28,7 +25,12 @@
} }
/* 平板 */ /* 平板 */
@media (min-width: 750px) and (max-width:1280px){ @media (min-width: 750px) and (max-width:1280px){
html{
font-size: 18px;
}
div{
font-size: 1rem;
}
} }
/* 电脑 */ /* 电脑 */
@media (min-width:1280px){ @media (min-width:1280px){

4
src/views/BackView.vue
View File

@ -37,9 +37,9 @@ function searchDetail(scope){
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 对话框 --> <!-- 对话框 -->
<el-dialog v-model="detailVisible" title="投票详情" width="800">
<el-dialog v-model="detailVisible" title="投票详情" width="520" center>
<el-table <el-table
:data="details" class="table-detail">
:data="details" class="table-detail" >
<el-table-column prop="jwCode" label="投票人精网号" width="150" /> <el-table-column prop="jwCode" label="投票人精网号" width="150" />
<el-table-column prop="voteTime" label="投票时间" width="200" /> <el-table-column prop="voteTime" label="投票时间" width="200" />
</el-table> </el-table>

561
src/views/FrontView.vue
View File

@ -1,52 +1,100 @@
<script setup> <script setup>
import CanApi from '@/api/CanApi'; import CanApi from '@/api/CanApi';
import { ElMessage } from 'element-plus';
import { defaultInitialZIndex, ElMessage } from 'element-plus';
import { ref } from 'vue'; import { ref } from 'vue';
const candidates = ref([]);
//候选人
const candidates = ref([])
const first = ref();
const second = ref();
const third = ref();
//后七名 //后七名
const backCandidates = ref([ const backCandidates = ref([
{ {
id: 4, id: 4,
name:"tom",
avatar:"../assets/头像框.png",
votes:100,
status:0
name: "tom",
avatar: "../assets/头像框.png",
votes: 100,
status: 0
}, },
{ {
id: 5, id: 5,
name:"tom",
avatar:"../assets/头像框.png",
votes:100
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
},
{
id: 6,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
}
,
{
id: 7,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
},
{
id: 8,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
},
{
id: 9,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
},
{
id: 10,
name: "tom",
avatar: "../assets/头像框.png",
votes: 100
} }
]) ])
//加载候选人 //加载候选人
function loadCandidates(jwcode) { function loadCandidates(jwcode) {
CanApi.getCandidates(jwcode).then(result =>{
backCandidates.value = result.data;
console.log("候选人：",backCandidates.value);
CanApi.getCandidates(jwcode).then(result => {
candidates.value = result.data;
candidates.value = result.data;
first.value = candidates.value[0]; // 假设第一个候选人
second.value = candidates.value[1]; // 假设第二个候选人
third.value = candidates.value[2]; // 假设第三个候选人
// 将除了前三个之外的所有候选人推入backCandidates.value数组
backCandidates.value = candidates.value.slice(3);
console.log("第一个候选人：", first.value);
console.log("第二个候选人：", second.value);
console.log("第三个候选人：", third.value);
console.log("后七名候选人：", backCandidates.value);
console.log("候选人：", backCandidates.value);
}) })
} }
loadCandidates(10013);
loadCandidates(10015);
//投票 //投票
const voter = ref({ const voter = ref({
jwCode: 10013,
jwCode: 10015,
candidateJwCode: 20010, candidateJwCode: 20010,
name: "小辉" name: "小辉"
}) })
function vote(code){
console.log("code:",code)
function vote(code) {
console.log("code:", code)
voter.value.candidateJwCode = code; voter.value.candidateJwCode = code;
console.log("voter:",voter.value)
console.log("voter:", voter.value)
// voter.value.voterJwcode,voter.value.candidateJwcode,voter.value.voterName // voter.value.voterJwcode,voter.value.candidateJwcode,voter.value.voterName
CanApi.Vote(voter.value).then(result =>{
if(result.code == 10000){
CanApi.Vote(voter.value).then(result => {
if (result.code == 10000) {
ElMessage.success(result.msg); ElMessage.success(result.msg);
loadCandidates(10013); loadCandidates(10013);
}else{
} else {
ElMessage.error(result.msg) ElMessage.error(result.msg)
} }
}) })
@ -59,235 +107,234 @@ function vote(code){
<div class="container"> <div class="container">
<!-- 上半部分内容 --> <!-- 上半部分内容 -->
<div class="header"> <div class="header">
<div class="channle">
<span class="channle-write">Homily Chart 第一频道</span>
</div>
<div class="title">
</div>
<!-- 投票规则 -->
<div class="rules"></div>
<div class="channle">
<span class="channle-write">Homily Chart 第一频道</span>
</div>
<div class="title">
<img class="duiyi" src="../assets/寻找队医.png">
</div>
<!-- 投票规则 -->
<div class="rules">
<img class="rule-title" src="../assets/投票规则.png">
<div class="rules-content"> <div class="rules-content">
每人每天最多可以投三票<br> 每人每天最多可以投三票<br>
当天不可重复投一个人<br> 当天不可重复投一个人<br>
统计累计票数最多的三个人 统计累计票数最多的三个人
</div> </div>
</div>
</div> </div>
<!-- 排名信息 --> <!-- 排名信息 -->
<div class="content"> <div class="content">
<!-- 一二三 -->
<div class="yes">
<img class="yiersan" src="../assets/前三.png">
</div>
<!-- 第二名 --> <!-- 第二名 -->
<div class="second">
<div class="second" :second="second">
<!-- 头像框 --> <!-- 头像框 -->
<div class="avatar-box2"></div> <div class="avatar-box2"></div>
<!-- 头像图片 --> <!-- 头像图片 -->
<img class="cover2" src="../assets/image.png">
<!-- 投票按钮 --> <!-- 投票按钮 -->
<div class="one-button2">投票</div>
<div class="one-button2" v-if="second.votes==false" @click="vote(first.jwCode)">投票</div>
<div class="buttoned2" v-else @click="vote(second.jwCode)">已投票</div>
<!-- 有多少人投票 --> <!-- 有多少人投票 -->
<div class="votes2">已有500人投票</div>
<div class="votes2">已有{{second.votes}}人投票</div>
<!-- 排名2 --> <!-- 排名2 -->
<div class="num2"></div> <div class="num2"></div>
</div> </div>
<!-- 第一名 --> <!-- 第一名 -->
<div class="second">
<div class="first" :first="first">
<!-- 头像框 --> <!-- 头像框 -->
<div class="avatar-box1"></div> <div class="avatar-box1"></div>
<!-- 头像图片 --> <!-- 头像图片 -->
<!-- 投票按钮 --> <!-- 投票按钮 -->
<div class="one-button1" @click="">投票</div>
<div class="one-button1" v-if="first.votes==false" @click="vote(first.jwCode)">投票</div>
<div class="buttoned1" v-else @click="vote(first.jwCode)">已投票</div>
<!-- 有多少人投票 --> <!-- 有多少人投票 -->
<div class="votes1">已有400人投票</div>
<div class="votes1">已有{{first.votes}}人投票</div>
<!-- 排名1 --> <!-- 排名1 -->
<div class="num1"></div> <div class="num1"></div>
</div> </div>
<!-- 第三名 --> <!-- 第三名 -->
<div class="third">
<div class="third" :third="third">
<!-- 头像框 --> <!-- 头像框 -->
<div class="avatar-box3"></div> <div class="avatar-box3"></div>
<!-- 头像图片 --> <!-- 头像图片 -->
<!-- 投票按钮 --> <!-- 投票按钮 -->
<div class="one-button3">投票</div>
<div class="one-button3" v-if="third.votes==false" @click="vote(third.jwCode)">投票</div>
<div class="buttoned3" v-else @click="vote(third.jwCode)">已投票</div>
<!-- 有多少人投票 --> <!-- 有多少人投票 -->
<div class="votes3">已有400人投票</div>
<div class="votes3">已有{{third.votes}}人投票</div>
<!-- 排名1 --> <!-- 排名1 -->
<div class="num3"></div> <div class="num3"></div>
</div> </div>
<!-- 一二三 -->
<div class="yes"></div>
<!-- 后七名循环列表 --> <!-- 后七名循环列表 -->
<div class="rand-box"> <div class="rand-box">
<div class="list"
v-for="backCandidate in backCandidates">
<!-- 排名 -->
<div class="num">{{ backCandidate.id }}</div>
<!-- 头像 -->
<img class="list-avatar"
:src="backCandidate.avatar"
>
<!-- 投票数 -->
<div class="votes">已有{{backCandidate.votes}}人投票</div>
<!-- 投票按钮 -->
<div class="list-button" @click="vote(backCandidate.jwCode)">投票</div>
</div>
<div class="list" v-for="(backCandidate,index) in backCandidates" :key="index">
<!-- 排名 -->
<div class="num">{{ index+4 }}</div>
<!-- 头像 -->
<img class="list-avatar" :src="backCandidate.avatar">
<!-- 投票数 -->
<div class="votes">已有{{ backCandidate.votes }}人投票</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>
<div class="footer">-以上数据截至至2024.12.28-</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
/* 手机 */
@media (max-width:750px) {
.container {
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 { .container {
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;
}
background-image: url('../assets/bg.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
background-size: 100% 100%;
margin-left: auto;
margin-right: auto;
position: relative;
}
}
}
/* 电脑 */ /* 电脑 */
@media (min-width:1280px) {
@media (min-width:1280px) {
.container { .container {
background-image: url('../assets/bg.png'); background-image: url('../assets/bg.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width: 40%;
height: 100vw;
background-size:100% 100%;
width: 38%;
height: 100%;
background-size: 100% 100%;
/* background-attachment:fixed; */ /* background-attachment:fixed; */
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
position: relative; position: relative;
}
}
}
}
@media (max-width:750px){
.container {
background-image: url('../assets/bg.png');
background-repeat: no-repeat;
width: 100%;
height: 100%;
background-size: 100% 100%;
/* background-attachment:fixed; */
margin-left: auto;
margin-right: auto;
position: relative;
}
}
.header { .header {
position: relative; position: relative;
height: 35%;
height: 28%;
} }
.content{
.content {
position: relative; position: relative;
height: 65%; height: 65%;
width: 100%; width: 100%;
} }
.channle { .channle {
position: relative;
background-image: url(../assets/top.png);
background-size: contain;
background-image: url(/src/assets/top.png);
background-repeat: no-repeat; background-repeat: no-repeat;
width: 58%;
height: 28%;
margin: auto;
overflow: visible;
/* background: linear-gradient(90deg, #FFE89C, #FFFBF2); */
}
.channle-write {
background-size: 100% 100%;
width: 65%;
margin-left: auto;
margin-right: auto;
color: #FFFFFF; color: #FFFFFF;
font-weight: 1000; font-weight: 1000;
width: 90%;
height: 90%;
font-size: 1.4rem;
border-width: 3px;
font-size: 1.5rem;
text-shadow: 2px 2px 2px #F14509, -2px -1px 2px #F14509, 1px -1px 2px #F14509, -2px 3px 2px #F14509; text-shadow: 2px 2px 2px #F14509, -2px -1px 2px #F14509, 1px -1px 2px #F14509, -2px 3px 2px #F14509;
position: absolute;
/* 添加这一行 */
top: 50%;
/* 垂直居中 */
left: 56%;
/* 水平居中 */
transform: translate(-50%, -50%);
/* 调整位置 */
display: flex;
justify-content: center;
align-items: center;
} }
.title { .title {
background-image: url(../assets/寻找队医.png);
width: 90%; width: 90%;
height: 80%;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute;
left: 7%;
top: 16%;
/* transform: scale(0.8) translateY(-50%); */
margin: auto;
}
.duiyi {
width: 100%;
margin-top: 5%;
} }
.rules { .rules {
background-image: url(../assets/投票规则.png);
width: 40%;
height: 30%; height: 30%;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
left: 29%;
top: 43%;
}
.rule-title {
width: 40%;
margin-left: 30%;
} }
.rules-content { .rules-content {
position: absolute;
left:16%;
top: 52%;
width: 343px;
height: 98px;
width: 45%;
height: 20%;
color: #FFFFFF; color: #FFFFFF;
font-size: 1.1rem;
font-size: 1.3rem;
font-weight: 700; font-weight: 700;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
/* margin: auto; */
margin: auto;
text-align: center; text-align: center;
text-shadow: 1px 0px 0 #F14509, -1px 0px 0 #F14509, 0px -1px 0 #F14509, 0px 0px 0 #F14509;
} }
.yes { .yes {
background-image: url(../assets/前三.png);
background-size: contain;
background-repeat: no-repeat;
width: 90%; width: 90%;
height: 30%; height: 30%;
position: absolute;
left: 5%;
top: 0%;
margin-left: auto;
margin-right: auto;
margin-top: 20%;
}
.yiersan{
margin-top: 9%;
width: 100%;
} }
.avatar-box2 { .avatar-box2 {
background-image: url(../assets/头像框.png); background-image: url(../assets/头像框.png);
position: absolute;
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute;
left: 6%;
top: -13%;
left: 9%;
top: -9%;
width: 25%; width: 25%;
height: 20%; height: 20%;
} }
.cover2{
position: absolute;
left: 11.5%;
top: -5.5%;
width: 20%;
height: 14%;
border-radius: 50%;
}
.one-button2 { .one-button2 {
position: absolute; position: absolute;
left: 7%;
top: -0.5%;
left: 9%;
top: 5%;
width: 22%; width: 22%;
height: 3.5%; height: 3.5%;
border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
@ -300,11 +347,26 @@ function vote(code){
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.buttoned2{
position: absolute;
left: 9%;
top: 5%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
border: #FA765D solid 2px;
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
text-align: center;
cursor: pointer;
background: #EEEEEE;
color: #999999;
}
.votes2 { .votes2 {
position: absolute; position: absolute;
left: 10%;
top: 3.5%;
left: 11%;
top: 9%;
width: 25%; width: 25%;
height: 3%; height: 3%;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
@ -313,15 +375,16 @@ function vote(code){
color: #E84E07; color: #E84E07;
z-index: 999; z-index: 999;
} }
.num2 { .num2 {
background-image: url(../assets/2.png); background-image: url(../assets/2.png);
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute;
left: 17%;
top: 9%;
width: 7%; width: 7%;
height: 15%; height: 15%;
position: absolute;
left: 14%;
top: 15%;
/* z-index: 999; */ /* z-index: 999; */
} }
@ -332,15 +395,15 @@ function vote(code){
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 38%; left: 38%;
top: -18%;
top: -12%;
width: 25%; width: 25%;
height: 20%; height: 20%;
} }
.one-button1 { .one-button1 {
position: absolute; position: absolute;
left: 38.5%;
top: -5%;
left: 39%;
top: 2%;
width: 22%; width: 22%;
height: 3.5%; height: 3.5%;
border-radius: 20px 20px 20px 20px; border-radius: 20px 20px 20px 20px;
@ -353,12 +416,28 @@ function vote(code){
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.buttoned1{
position: absolute;
left: 39%;
top: 2%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
border: #FA765D solid 2px;
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
text-align: center;
cursor: pointer;
background: #EEEEEE;
color: #999999;
}
.votes1 { .votes1 {
position: absolute; position: absolute;
left: 40%;
top: -1%;
left: 43.5%;
top: 6%;
width: 25; width: 25;
height: 3; height: 3;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
@ -373,8 +452,8 @@ function vote(code){
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 46%;
top: 7%;
left: 47%;
top: 12%;
width: 5%; width: 5%;
height: 15%; height: 15%;
/* z-index: 999; */ /* z-index: 999; */
@ -385,34 +464,49 @@ function vote(code){
background-size: contain; background-size: contain;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 69%;
top: -13.5%;
left: 68%;
top: -9%;
width: 25%; width: 25%;
height: 20%; height: 20%;
} }
.one-button3 { .one-button3 {
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;
position: absolute;
left: 69%;
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: 1.4rem;
color: #E8160C;
text-align: center;
cursor: pointer;
}
.buttoned3{
position: absolute;
left: 69%;
top: 5%;
width: 22%;
height: 3.5%;
border-radius: 20px 20px 20px 20px;
border: #FA765D solid 2px;
/* 文字 */
font-weight: 700;
font-size: 1.4rem;
text-align: center;
cursor: pointer;
background: #EEEEEE;
color: #999999;
} }
.votes3 { .votes3 {
position: absolute; position: absolute;
left: 70.5%; left: 70.5%;
top: 3.5%;
top: 9%;
width: 25%; width: 25%;
height: 3%; height: 3%;
font-family: Alibaba PuHuiTi; font-family: Alibaba PuHuiTi;
@ -429,83 +523,91 @@ cursor: pointer;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
left: 75%; left: 75%;
top: 9%;
top: 15%;
width: 7%; width: 7%;
height: 15%; height: 15%;
/* z-index: 999; */ /* 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 { .rand-box {
background-color: #FFFFFF; background-color: #FFFFFF;
border: #F14509 solid 2px; border: #F14509 solid 2px;
border-radius: 27.78px 27.78px 27.78px 27.78px; border-radius: 27.78px 27.78px 27.78px 27.78px;
position: absolute;
left: 5%;
top: 18%;
width: 90%; width: 90%;
height: auto; height: auto;
margin: auto;
/* height: 70%; */ /* height: 70%; */
/* box-shadow: 3px 8px 19px 0 #66f1291f; */ /* box-shadow: 3px 8px 19px 0 #66f1291f; */
box-shadow: 9px 9px 19px -9px #F1291F40; box-shadow: 9px 9px 19px -9px #F1291F40;
} }
.list{
.list {
display: flex; display: flex;
/* display: inline-block; */ /* display: inline-block; */
align-items: center; align-items: center;
margin-top: 3%;
/* margin-bottom: 10px; */
justify-content: center;
margin-top: 5%;
margin-bottom: 5%;
margin-left: 4%; margin-left: 4%;
padding: 2%; padding: 2%;
border-bottom: 1px solid #B24300;
border-bottom: 1px dashed #B24300;
}
.rand-box>.list:not(:last-child) {
border-bottom: 1px dashed #B24300;
}
.rand-box>.list:last-child {
border-bottom: none;
margin-bottom: 3%;
} }
.num{
.num {
font-family: zihunxingmouhei_trial; font-family: zihunxingmouhei_trial;
font-size: 1.625rem; /* 排名字体大小 */
font-weight: 800; /* 排名字体加粗 */
font-size: 1.625rem;
/* 排名字体大小 */
font-weight: 800;
/* 排名字体加粗 */
color: #F4850D; color: #F4850D;
margin-right: 8%; /* 与头像之间的间距 */
margin-right: 8%;
/* 与头像之间的间距 */
margin-left: 20px; margin-left: 20px;
} }
.list-avatar { .list-avatar {
width: 20%; width: 20%;
height: 18%; height: 18%;
border-radius: 50%; /* 圆形头像 */
border-radius: 50%;
/* 圆形头像 */
/* margin-right: 2%; */ /* margin-right: 2%; */
} }
.votes { .votes {
font-size: 1.2rem; /* 投票数字体大小 */
font-size: 1.2rem;
/* 投票数字体大小 */
font-weight: 400; font-weight: 400;
width: 190px;
height: 27px;
flex-grow: 1; /* 填充剩余空间 */
color: #F4850D; /* 投票数字体颜色 */
width: 190px;
height: 27px;
flex-grow: 1;
/* 填充剩余空间 */
color: #F4850D;
/* 投票数字体颜色 */
/* margin-right: 2%; */ /* margin-right: 2%; */
} }
.list-button {
.list-button1 {
background: linear-gradient(81deg, #FFE89C, #FFC040); background: linear-gradient(81deg, #FFE89C, #FFC040);
border: #FA765D solid 2px; border: #FA765D solid 2px;
width: 22%; width: 22%;
height: 10%;
border-radius: 24.15px 24.15px 24.15px 24.15px;
cursor: pointer; /* 鼠标悬停时的指针样式 */
transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
height: 18%;
border-radius: 24.15px 24.15px 24.15px 24.15px;
cursor: pointer;
/* 鼠标悬停时的指针样式 */
transition: background-color 0.3s;
/* 背景颜色变化的过渡效果 */
/* 文字 */ /* 文字 */
font-weight: 700; font-weight: 700;
font-size: 1.3rem; font-size: 1.3rem;
@ -514,10 +616,39 @@ transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
letter-spacing: 1%; letter-spacing: 1%;
margin-right: 2%; margin-right: 2%;
} }
.list-button2{
background: #EEEEEE;
color: #999999;
border: #FA765D solid 2px;
width: 22%;
height: 18%;
border-radius: 24.15px 24.15px 24.15px 24.15px;
cursor: pointer;
/* 鼠标悬停时的指针样式 */
transition: background-color 0.3s;
/* 背景颜色变化的过渡效果 */
/* 文字 */
font-weight: 700;
font-size: 1.3rem;
text-align: center;
letter-spacing: 1%;
margin-right: 2%;
}
.list-button:hover { .list-button:hover {
background-color: #e6b800; /* 鼠标悬停时的背景颜色 */
background-color: #e6b800;
/* 鼠标悬停时的背景颜色 */
} }
.footer {
width: 60%;
height: 10%;
font-weight: 500;
text-align: center;
color: #B24300;
margin-left: auto;
margin-right: auto;
padding-top: 5%;
padding-bottom: 5%;
}
</style> </style>

4
vite.config.js
View File

@ -2,13 +2,13 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
vue(), vue(),
vueDevTools(),
// vueDevTools(),
], ],
resolve: { resolve: {
alias: { alias: {

Write Preview
Loading…
Cancel
Save