瀏覽代碼

中奖名单图片

yanliming 15 小時之前
父節點
當前提交
5831d3b9dd
共有 3 個文件被更改,包括 390 次插入206 次删除
  1. 0 0
      src/assets/img/zjmd.png
  2. 60 60
      src/views/startLottery-zkx.vue
  3. 330 146
      src/views/startLottery.vue

+ 0 - 0
public/zjmd.png → src/assets/img/zjmd.png


+ 60 - 60
src/views/startLottery-zkx.vue

@@ -67,7 +67,7 @@
 
 
 						</div>
 						</div>
 
 
-						<div style="width:100%;margin-top: 24px;">
+						<div style="width:100%;margin-top: 24px;">
 							<span >一等奖:1人</span>
 							<span >一等奖:1人</span>
 							<el-divider></el-divider>
 							<el-divider></el-divider>
 							<div style="margin-bottom:30px;">
 							<div style="margin-bottom:30px;">
@@ -85,7 +85,7 @@
 
 
 						</div>
 						</div>
 
 
-						<div style="width:100%;margin-top: 24px;">
+						<div style="width:100%;margin-top: 24px;">
 							<span >一等奖:1人</span>
 							<span >一等奖:1人</span>
 							<el-divider></el-divider>
 							<el-divider></el-divider>
 							<div style="margin-bottom:30px;">
 							<div style="margin-bottom:30px;">
@@ -93,61 +93,61 @@
 									<el-image style="width: 80px; height: 80px"
 									<el-image style="width: 80px; height: 80px"
 										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
 										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
 									<div style="font-size:12px">13588888888</div>
 									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
-								</div>
-								<div class="imgText">
-									<el-image style="width: 80px; height: 80px"
-										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
+								</div>
+								<div class="imgText">
+									<el-image style="width: 80px; height: 80px"
+										src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
+									<div style="font-size:12px">13588888888</div>
 								</div>
 								</div>
 								<div class="imgText">
 								<div class="imgText">
 									<el-image style="width: 80px; height: 80px"
 									<el-image style="width: 80px; height: 80px"
@@ -242,9 +242,9 @@
 	.leftRegionB {
 	.leftRegionB {
 		margin: 40px 40px 40px 0;
 		margin: 40px 40px 40px 0;
 		display: flex;
 		display: flex;
-		flex-direction: column;
-		    overflow: hidden;
-		    overflow-y: auto;
+		flex-direction: column;
+		overflow: hidden;
+		overflow-y: auto;
 	}
 	}
 
 
 	.el-main {
 	.el-main {

+ 330 - 146
src/views/startLottery.vue

@@ -1,74 +1,229 @@
 <template>
 <template>
-    <div >
-        <el-container class="bgDiv">
-            <el-header style="height:150px">Header</el-header>
-            <el-container>
-                <el-aside width="550px" style="text-align:left">
-                    <H1 style="text-align:center">抽奖活动</H1>
-                    <div class="leftMain">
-                        <el-form ref="form" :model="formModel" label-width="80px">
-                            <el-form-item label="活动名称">
-                                <el-select v-model="formModel.activityId" placeholder="请选择" style="width:350px" size="mini" @change="handleChange">
-                                    <el-option
-                                    v-for="item in activityList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id">
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                            <el-form-item label="奖项">
-                                <el-select v-model="formModel.awardId" placeholder="请选择" style="width:350px" size="mini">
-                                    <el-option
-                                    v-for="item in awardInfoList"
-                                    :key="item.id"
-                                    :label="item.name"
-                                    :value="item.id">
-                                    <span style="float: left">{{ item.name }}</span>
-                                    <span style="float: right; color: #8492a6; font-size: 13px">数量:{{ item.num }}</span>
-                                    </el-option>
-                                </el-select>
-                            </el-form-item>
-                        </el-form>
-                        <div style="text-align:center">
-                            <span>
-                                <el-button type="primary" @click="handleSubmit" :loading="submitting">开始抽奖</el-button>
-                                <el-button >重新开始</el-button>
-                            </span>
-                        </div>
-                        <div class="imgDiv">
-                            <el-image
-                                style="width: 150px; height: 150px"
-                                src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
-                                fit="fit">
-                            </el-image>
-                        </div>
-                    </div>
-                </el-aside>
-                <el-main>
-                    <div style="text-align:center;margin-bottom:30px" >中奖名单</div>
-                    <div style="width:100%">
-                      <span>一等奖:1人</span>
-                      <el-divider></el-divider>
-                      <div style="margin-bottom:30px;">
-                        <div class="imgText">
-                          <el-image
-                            style="width: 80px; height: 80px"
-                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-                            <div style="font-size:12px">13588888888</div>
-                        </div>
-                        <div class="imgText">
-                          <el-image
-                            style="width: 80px; height: 80px"
-                            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"></el-image>
-                            <div style="font-size:12px">13588888888</div>
-                        </div>
-                      </div>
-                    </div>
-                </el-main>
-            </el-container>
-        </el-container>
-    </div>
+  <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;">
+          <div class="leftRegion leftRegionA ">
+            <H1 style="text-align:center">抽奖活动</H1>
+            <div class="leftMain">
+              <el-form ref="form" :model="formModel" label-width="80px">
+                <el-form-item label="活动">
+                  <el-select
+                    v-model="formModel.activityId"
+                    placeholder="请选择"
+                    style="width:420px"
+                    size="mini"
+                    @change="handleChange"
+                  >
+                    <el-option
+                      v-for="item in activityList"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="奖项">
+                  <el-select
+                    v-model="formModel.awardId"
+                    placeholder="请选择"
+                    style="width:160px"
+                    size="mini"
+                  >
+                    <el-option
+                      v-for="item in awardInfoList"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                    >
+                      <span style="float: left">{{ item.name }}</span>
+                      <span
+                        style="float: right; color: #8492a6; font-size: 13px"
+                        >数量:{{ item.num }}</span
+                      >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+              </el-form>
+              <div style="text-align:center">
+                <span>
+                  <el-button
+                    type="primary"
+                    @click="handleSubmit"
+                    :loading="submitting"
+                    >开始抽奖</el-button
+                  >
+                  <el-button>重新开始</el-button>
+                </span>
+              </div>
+              <div class="imgDiv">
+                <el-image
+                  style="width: 150px; height: 150px"
+                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  fit="fit"
+                >
+                </el-image>
+              </div>
+            </div>
+          </div>
+        </el-aside>
+        <el-main>
+          <div class="leftRegion leftRegionB">
+            <div style="text-align:center;margin-bottom:10px">
+              <el-image
+                style="width: 150px; height: 50px"
+                :src="require('@/assets/img/zjmd.png')"
+                alt="Element UI Logo"
+                fit="contain"
+              >
+              </el-image>
+            </div>
+            <div style="width:100%;margin-top: 24px;">
+              <span>一等奖:1人</span>
+              <el-divider></el-divider>
+              <div style="margin-bottom:30px;">
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+              </div>
+            </div>
+
+            <div style="width:100%;margin-top: 24px;">
+              <span>一等奖:1人</span>
+              <el-divider></el-divider>
+              <div style="margin-bottom:30px;">
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+              </div>
+            </div>
+
+            <div style="width:100%;margin-top: 24px;">
+              <span>一等奖:1人</span>
+              <el-divider></el-divider>
+              <div style="margin-bottom:30px;">
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+                <div class="imgText">
+                  <el-image
+                    style="width: 80px; height: 80px"
+                    src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+                  ></el-image>
+                  <div style="font-size:12px">13588888888</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
 </template>
 </template>
 
 
 <script>
 <script>
@@ -76,98 +231,127 @@ import startLotteryApi from "@/api/business/startLottery";
 
 
 export default {
 export default {
   data() {
   data() {
-    return{
-      submitting:false,
-      formModel:{},
-      activityList:[],
-      awardInfoList:[],
-    }
+    return {
+      submitting: false,
+      formModel: {},
+      activityList: [],
+      awardInfoList: [],
+    };
   },
   },
   created() {
   created() {
     var self = this;
     var self = this;
 
 
-    startLotteryApi.list().then(function (response) {
-        var jsonData = response.data;
-        if (jsonData.result) {
-            if (jsonData.data != null && jsonData.data != "") {
-                self.activityList = jsonData.data;
-            }
+    startLotteryApi.list().then(function(response) {
+      var jsonData = response.data;
+      if (jsonData.result) {
+        if (jsonData.data != null && jsonData.data != "") {
+          self.activityList = jsonData.data;
         }
         }
+      }
     });
     });
   },
   },
   methods: {
   methods: {
-    handleChange(val){
+    handleChange(val) {
       var self = this;
       var self = this;
       var formData = new FormData();
       var formData = new FormData();
-  
+
       formData.append("activityId", val);
       formData.append("activityId", val);
 
 
-      self.awardInfoList=[];
+      self.awardInfoList = [];
 
 
-      startLotteryApi.findByActivityId(formData).then(function (response) {
-          var jsonData = response.data;
-          if (jsonData.result) {
-              if (jsonData.data != null && jsonData.data != "") {
-                  self.awardInfoList = jsonData.data;
-              }
+      startLotteryApi.findByActivityId(formData).then(function(response) {
+        var jsonData = response.data;
+        if (jsonData.result) {
+          if (jsonData.data != null && jsonData.data != "") {
+            self.awardInfoList = jsonData.data;
           }
           }
+        }
       });
       });
     },
     },
-    handleSubmit(){
-
-    }
-  }
-}
+    handleSubmit() {},
+  },
+};
 </script>
 </script>
 <style>
 <style>
-.bgDiv{
-  background-image:url('../../public/bg2.jpg');
-  background-size: 100% auto; /* 这会让图片在水平方向上铺满,垂直方向上保持原始比例 */
-  background-repeat: repeat-x; /* 这会在水平方向上平铺 */
-  color:#ffffff
+/* zkx */
+.bgDiv {
+  background-image: url("../../public/bg2.jpg");
+  background-size: 100% 100%;
+  /* 这会让图片在水平方向上铺满,垂直方向上保持原始比例 */
+  background-repeat: repeat-x;
+  /* 这会在水平方向上平铺 */
+  color: #ffffff;
+  height: 100%;
+}
+
+.leftRegion {
+  background-color: rgba(20, 0, 98, 0.5);
+  padding: 20px;
+  border: 2px solid rgba(255, 255, 255, 1);
+  border-radius: 10px;
+  height: 800px;
+  margin: 40px;
+}
+
+.leftRegionA {
+  width: 600px;
+}
+
+.leftRegionB {
+  margin: 40px 40px 40px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.el-main {
+  /* //height: 500px; */
+  overflow: auto;
+  text-align: left;
+  padding: 0px;
+  margin: 0px;
+}
+
+/* zkx */
+.el-header,
+.el-footer {
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  text-align: center;
+  padding: 10px;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+
+.leftMain {
+  margin-top: 30px;
+}
+
+.imgDiv {
+  margin-top: 50px;
+  text-align: center;
+}
+
+.el-form-item__label {
+  color: #ffffff;
+}
+
+.imgText {
+  float: left;
+  margin-left: 20px;
 }
 }
- .el-header, .el-footer {
-    text-align: center;
-    line-height: 60px;
-  }
-  
-  .el-aside {
-    text-align: center;
-    padding:10px
-  }
-  
-  .el-main {
-    height:500px;
-    overflow:auto;
-    text-align: left;
-    padding:50px
-  }
-  
-  body > .el-container {
-    margin-bottom: 40px;
-  }
-  
-  .el-container:nth-child(5) .el-aside,
-  .el-container:nth-child(6) .el-aside {
-    line-height: 260px;
-  }
-  
-  .el-container:nth-child(7) .el-aside {
-    line-height: 320px;
-  }
-
-  .leftMain{
-    margin-top:30px
-  }
-  .imgDiv{
-    margin-top:50px;
-    text-align:center
-  }
-  .el-form-item__label{
-    color:#ffffff
-  }
-  .imgText{
-    float:left;
-    margin-left:20px
-  }
-</style>
+</style>