|
|
@@ -1,17 +1,17 @@
|
|
|
<template>
|
|
|
<div class="bgDiv">
|
|
|
<el-container>
|
|
|
- <!-- <el-header style="height:150px">Header</el-header> -->
|
|
|
+ <!-- -->
|
|
|
<el-container>
|
|
|
- <el-aside width="720px" style="text-align:left;padding:0;">
|
|
|
+ <el-aside width="36vw" style="text-align:left;padding:0;">
|
|
|
<div class="leftRegion leftRegionA ">
|
|
|
|
|
|
|
|
|
<H1 style="text-align:center">抽奖活动</H1>
|
|
|
<div class="leftMain">
|
|
|
- <el-form ref="form" :model="formModel" label-width="80px">
|
|
|
+ <el-form ref="form" :model="formModel" label-width="4vw">
|
|
|
<el-form-item label="活动">
|
|
|
- <el-select v-model="formModel.activityId" placeholder="请选择" style="width:420px"
|
|
|
+ <el-select v-model="formModel.activityId" placeholder="请选择" style="width:21vw"
|
|
|
size="mini" @change="handleChange">
|
|
|
<el-option v-for="item in activityList" :key="item.id" :label="item.name"
|
|
|
:value="item.id">
|
|
|
@@ -19,7 +19,7 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="奖项">
|
|
|
- <el-select v-model="formModel.awardId" placeholder="请选择" style="width:160px"
|
|
|
+ <el-select v-model="formModel.awardId" placeholder="请选择" style="width:8vw"
|
|
|
size="mini">
|
|
|
<el-option v-for="item in awardInfoList" :key="item.id" :label="item.name"
|
|
|
:value="item.id">
|
|
|
@@ -38,7 +38,7 @@
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="imgDiv">
|
|
|
- <el-image style="width: 150px; height: 150px"
|
|
|
+ <el-image style="width: 7.5vw; height: 7.5vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
|
|
|
fit="fit">
|
|
|
</el-image>
|
|
|
@@ -48,111 +48,111 @@
|
|
|
</el-aside>
|
|
|
<el-main>
|
|
|
<div class="leftRegion leftRegionB">
|
|
|
- <div style="text-align:center;margin-bottom:30px">中奖名单</div>
|
|
|
- <div style="width:100%;margin-top: 24px;">
|
|
|
+ <div style="text-align:center;margin-bottom:1.5vw">中奖名单</div>
|
|
|
+ <div style="width:100%;margin-top: 1.2vw;">
|
|
|
<span>一等奖：1人</span>
|
|
|
<el-divider></el-divider>
|
|
|
- <div style="margin-bottom:30px;">
|
|
|
+ <div style="margin-bottom:1.5vw;">
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <div style="width:100%;margin-top: 24px;">
|
|
|
+ <div style="width:100%;margin-top: 1.2vw;">
|
|
|
<span>一等奖：1人</span>
|
|
|
<el-divider></el-divider>
|
|
|
- <div style="margin-bottom:30px;">
|
|
|
+ <div style="margin-bottom:1.5vw;">
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
- <div style="width:100%;margin-top: 24px;">
|
|
|
+ <div style="width:100%;margin-top: 1.2vw;">
|
|
|
<span>一等奖：1人</span>
|
|
|
<el-divider></el-divider>
|
|
|
- <div style="margin-bottom:30px;">
|
|
|
+ <div style="margin-bottom:1.5vw;">
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
<div class="imgText">
|
|
|
- <el-image style="width: 80px; height: 80px"
|
|
|
+ <el-image style="width: 4vw; height: 4vw"
|
|
|
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
|
|
|
- <div style="font-size:12px">13588888888</div>
|
|
|
+ <div style="font-size:0.6vw">13588888888</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -246,45 +246,46 @@
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
|
|
|
- width: 800px;
|
|
|
- height: 720px;
|
|
|
+ width: 40vw;
|
|
|
+ height: 72vh;
|
|
|
|
|
|
border-radius: 10px;
|
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
|
text-align: center;
|
|
|
box-shadow: 0px 0px 6px 10px rgba(0, 0, 0, 0.15);
|
|
|
border: 3px solid rgba(255, 255, 255, 1);
|
|
|
- padding: 40px;
|
|
|
+ padding: 2vw;
|
|
|
}
|
|
|
|
|
|
.l-title {
|
|
|
- font-size: 36px;
|
|
|
+ font-size: 1.8vw;
|
|
|
}
|
|
|
|
|
|
.l-title2 {
|
|
|
- font-size: 24px;
|
|
|
+ font-size: 1.2vw;
|
|
|
|
|
|
}
|
|
|
|
|
|
.l-results {
|
|
|
- margin-top: 72px;
|
|
|
+ margin-top: 3.6vw;
|
|
|
|
|
|
}
|
|
|
|
|
|
.l-imgText {
|
|
|
- //margin: 0 32px 32px 0 ;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
//大图
|
|
|
.lotteryProcess {
|
|
|
.l-imgText-img {
|
|
|
- width: 240px;
|
|
|
- height: 240px
|
|
|
+ width: 12vw;
|
|
|
+ height: 24vh;
|
|
|
+ max-height: 12vw;
|
|
|
}
|
|
|
|
|
|
.l-imgText-t {
|
|
|
- font-size: 28px;
|
|
|
- margin-top: 20px;
|
|
|
+ font-size: 1.4vw;
|
|
|
+ margin-top: 1vw;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -294,27 +295,27 @@
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: flex-start;
|
|
|
- height: 400px;
|
|
|
+ height: 40vh;
|
|
|
overflow: hidden;
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
.l-imgText-img {
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
+ width: 5vw;
|
|
|
+ height: 5vw;
|
|
|
}
|
|
|
|
|
|
.l-imgText-t {
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 0.9vw;
|
|
|
}
|
|
|
|
|
|
.l-imgText {
|
|
|
- margin: 0 24px 24px 0;
|
|
|
+ margin: 0 1.2vw 1.2vw 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.l-button-group {
|
|
|
- margin-top: 70px;
|
|
|
+ margin-top: 3.5vh;
|
|
|
}
|
|
|
|
|
|
/* zkx */
|
|
|
@@ -330,20 +331,20 @@
|
|
|
|
|
|
.leftRegion {
|
|
|
background-color: rgba(20, 0, 98, 0.5);
|
|
|
- padding: 20px;
|
|
|
+ padding: 1vw;
|
|
|
border: 2px solid rgba(255, 255, 255, 1);
|
|
|
border-radius: 10px;
|
|
|
- height: 800px;
|
|
|
- margin: 40px;
|
|
|
+ height: 80vh;
|
|
|
+ margin: 2vw;
|
|
|
|
|
|
}
|
|
|
|
|
|
.leftRegionA {
|
|
|
- width: 600px;
|
|
|
+ width:30vw;
|
|
|
}
|
|
|
|
|
|
.leftRegionB {
|
|
|
- margin: 40px 40px 40px 0;
|
|
|
+ margin: 2vw 2vw 2vw 0;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
@@ -362,35 +363,35 @@
|
|
|
.el-header,
|
|
|
.el-footer {
|
|
|
text-align: center;
|
|
|
- line-height: 60px;
|
|
|
+ line-height: 3vw;
|
|
|
}
|
|
|
|
|
|
.el-aside {
|
|
|
text-align: center;
|
|
|
- padding: 10px
|
|
|
+ padding: 0.5vw
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body>.el-container {
|
|
|
- margin-bottom: 40px;
|
|
|
+ margin-bottom: 2vw;
|
|
|
}
|
|
|
|
|
|
.el-container:nth-child(5) .el-aside,
|
|
|
.el-container:nth-child(6) .el-aside {
|
|
|
- line-height: 260px;
|
|
|
+ line-height: 13vw;
|
|
|
}
|
|
|
|
|
|
.el-container:nth-child(7) .el-aside {
|
|
|
- line-height: 320px;
|
|
|
+ line-height: 16vw;
|
|
|
}
|
|
|
|
|
|
.leftMain {
|
|
|
- margin-top: 30px
|
|
|
+ margin-top: 1.5vw
|
|
|
}
|
|
|
|
|
|
.imgDiv {
|
|
|
- margin-top: 50px;
|
|
|
+ margin-top: 2.5vw;
|
|
|
text-align: center
|
|
|
}
|
|
|
|
|
|
@@ -400,6 +401,6 @@
|
|
|
|
|
|
.imgText {
|
|
|
float: left;
|
|
|
- margin-left: 20px
|
|
|
+ margin-left: 1vw
|
|
|
}
|
|
|
</style>
|
zhengkaixin