feat:增加投票信息

src/assets/scss/common.scss

@@ -1,13 +1,14 @@
 html,
 body {
-		height: 100vh;
-		margin: 0;
-	 padding: 0;
-    // overflow-y: auto;
+	height: 100vh;
+	margin: 0;
+	padding: 0;
+	// overflow-y: auto;
 }
+
 //标签tag样式-----------------------------------------------------------------
 // 必修
-.tag1{
+.tag1 {
 	width: 80px;
 	height: 26px;
 	border: 1px solid #51C6E6;
@@ -19,8 +20,9 @@ body {
 	font-weight: bold;
 	color: #51C6E6;
 }
+
 // 选修
-.tag2{
+.tag2 {
 	width: 80px;
 	height: 26px;
 	border: 1px solid #CD7FED;
@@ -32,8 +34,9 @@ body {
 	font-weight: bold;
 	color: #CD7FED;
 }
+
 // 在线 面授 测评 外部链接 作业 辩论等
-.tag3{
+.tag3 {
 	height: 26px;
 	border: 1px solid #7F96ED;
 	border-radius: 4px;
@@ -43,12 +46,13 @@ body {
 	font-size: 14px;
 	font-weight: bold;
 	color: #7F96ED;
-	padding-left:25px ;
+	padding-left: 25px;
 	padding-right: 25px;
 }
+
 // 标签 
-.tag4{
-	padding-left:15px ;
+.tag4 {
+	padding-left: 15px;
 	padding-right: 12px;
 	height: 24px;
 	border: 1px solid rgba(255, 185, 109, 1);
@@ -63,18 +67,39 @@ body {
 
 //标签tag样式-----------------------------------------------------------------
 //进度条样式
-.progress10{
-background-color:rgba(238, 112, 108, 1) !important;
+.progress10 {
+	background-color: rgba(238, 112, 108, 1) !important;
 }
-.progress30{
-	background-color:rgba(255, 151, 38, 1) !important;
+
+.progress30 {
+	background-color: rgba(255, 151, 38, 1) !important;
 }
-.progress50{
-	background-color:rgba(39, 122, 255, 1) !important;
+
+.progress50 {
+	background-color: rgba(39, 122, 255, 1) !important;
 }
-.progress80{
-	background-color:rgba(59, 94, 251, 1) !important;
+
+.progress80 {
+	background-color: rgba(59, 94, 251, 1) !important;
 }
-.progress100{
-	background-color:rgba(57, 219, 183, 1) !important;
+
+.progress100 {
+	background-color: rgba(57, 219, 183, 1) !important;
 }
+
+
+//提交按钮
+.submitbtn {
+	width: 146px;
+	height: 46px;
+	background: #2478ff;
+	box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+	border-radius: 4px;
+	// width: 66px;
+	font-size: 16px;
+	font-weight: 800;
+	color: #ffffff;
+	line-height: 24px;
+	border: 0;
+	cursor: pointer;
+}

src/views/ballot/BallotPage.vue

@@ -77,16 +77,47 @@
               <div
                 v-for="(item, index) in dataInfo.ballotVo?.voteStemVoList"
                 :key="index"
+                style="margin-bottom: 41px"
               >
                 <div class="stem">
                   <div>{{ item.orderNumber }}、</div>
                   <div>{{ item.voteStemName }}</div>
                 </div>
-                <div v-for="(value, key) in item.optionDetailList" :key="key">
-                  <div>{{ value.optionName }}</div>
+                <div class="options">
+                  <div
+                    v-for="(value, key) in item.optionDetailList"
+                    :key="key"
+                    style="
+                      width: 140px;
+                      margin-right: 114px;
+                      margin-bottom: 25px;
+                    "
+                  >
+                    <img
+                      style="width: 140px; height: 140px; border-radius: 8px"
+                      :src="value.optionPictureAddress"
+                    />
+                    <div class="radio">
+                      <label>
+                        <input type="radio" name="one" value="right" />
+                        <div class="option"></div>
+                        <div class="opt-text">{{ value.optionName }}</div>
+                      </label>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
+            <div
+              style="
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                margin-top: 30px;
+              "
+            >
+              <button class="submitbtn btn01" @click="submitVote">提交</button>
+            </div>
           </div>
           <div class="right">
             <div class="righttitle">
@@ -170,13 +201,8 @@ const {
 //获取基本信息
 const { data: dataInfo } = useRequest(VOTE_DETAIL2(voteId));
 console.log("dataInfo", dataInfo);
-// watch(dataInfo, () => {
-//   if (dataInfo._rawValue) {
-//     votedetail = dataInfo._rawValue;
-//     console.log("votedetail.", votedetail);
-//   }
-// });
-// console.log("votedetail.", votedetail);
+
+const submitVote = () => {};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -437,6 +463,54 @@ console.log("dataInfo", dataInfo);
             color: #333330;
             line-height: 38px;
           }
+          .options {
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+          }
+          .radio {
+            margin-top: 14px;
+            margin-left: -16px;
+            position: relative;
+          }
+          .radio label {
+            line-height: 20px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            font-weight: normal;
+            .opt-text {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333330;
+              line-height: 18px;
+              margin-left: 10px;
+            }
+          }
+
+          .radio .option {
+            width: 19px;
+            height: 18px;
+            // position: absolute;
+            // top: 1px;
+            // // top: 32px;
+            // left: 0px;
+            background-size: cover;
+            background: url(../../assets/image/noselect.png) no-repeat;
+            background-size: cover;
+          }
+
+          .radio input[type="radio"] {
+            display: inline-block;
+            margin-right: -3px;
+            opacity: 0;
+          }
+
+          .radio input[type="radio"]:checked + div {
+            background: url(../../assets/image/select.png) no-repeat;
+            background-size: cover;
+          }
+
           .imgcontent {
             display: flex;