活动页

src/pages/vote/Index.vue

@@ -1,15 +1,7 @@
 <template>
-  <div
-    style="height: 100%;font-size: 0;overflow-y: scroll;"
-    ref="votePage"
-    @scroll="scroll"
-  >
-    <img
-      :src="'https://djweb.smcic.net/static/img/vote.jpg?t=' + t"
-      alt=""
-      srcset=""
-    />
-    <div ref="vote" class="vote">
+  <div ref="votePage" class="voteBg" @scroll="scroll">
+    <img src="../../assets/image/top.png" />
+    <div ref="vote" class="vote" v-if="appNameList.length">
       <van-checkbox-group v-model="checkboxGroup" :max="config.VOTE_MAX">
         <van-cell-group>
           <van-cell
@@ -53,7 +45,7 @@
         :style="{ height: '80%' }"
       >
         <div class="introduction">
-          <div class="head van-hairline--bottom">简介</div>
+          <div class="head van-hairline--bottom">创意说明</div>
           <div class="body" v-text="doc"></div>
         </div>
       </van-popup>
@@ -103,16 +95,13 @@ export default {
       doc: "",
       appName: "",
       config: {},
-      disable: false,
-      t: Date.now()
+      disable: false
     };
   },
   methods: {
     voteLabel(item) {
-      if (this.disable) {
-        return "作者：" + item.userName + "       票数：" + item.vote;
-      }
-      return "作者：" + item.userName;
+      if (!this.disable) return;
+      return "票数：" + item.vote;
     },
     refresh() {
       data = {
@@ -239,7 +228,7 @@ export default {
     window.voteNext();
     let height = document.body.offsetHeight || 0;
     let width = document.body.offsetWidth || 0;
-    this.$refs.vote.style.minHeight = height - (856 / 1500) * width + "px";
+    this.$refs.vote.style.minHeight = height - (856 / 1500) * width - 44 + "px";
 
     sysConfig().then(r => {
       this.config = r || {};
@@ -260,56 +249,70 @@ export default {
 <style lang="scss">
 $themeColor: #e6837c;
 
-.vote {
-  width: 100%;
-  padding: 1em 1em 46px 1em;
-  background-image: url("../../assets/image/main.jpg");
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
+.voteBg {
+  // background-image: url("../../assets/image/main.jpg");
+  // background-repeat: no-repeat;
+  // background-size: 100% 100%;
+  height: 100%;
+  font-size: 0;
+  overflow-y: scroll;
 
-  .introduction {
-    font-size: 14px;
+  .vote {
+    padding: 1em 1em 46px 1em;
+    width: calc(100% - 20px);
+    border-radius: 10px;
+    margin: 0 auto;
 
-    .head {
-      height: 54px;
-      line-height: 54px;
-      text-align: center;
+    .van-cell__title {
+      flex: 2;
     }
 
-    .body {
-      line-height: 30px;
-      text-indent: 2em;
+    .introduction {
+      font-size: 14px;
+
+      .head {
+        height: 54px;
+        line-height: 54px;
+        text-align: center;
+        font-size: 16px;
+      }
+
+      .body {
+        line-height: 30px;
+        text-indent: 2em;
+        padding: 1em;
+      }
     }
-  }
 
-  .bottom {
-    position: fixed;
-    width: 100%;
-    left: 0%;
-    padding: 1em 0;
-    bottom: 0;
-    background-image: linear-gradient(
-      0deg,
-      rgba(170, 170, 170, 0.8) 5%,
-      rgba(0, 0, 0, 0)
-    );
-  }
+    .bottom {
+      position: fixed;
+      width: 100%;
+      left: 0%;
+      padding: 1em 0;
+      bottom: 0;
+      background-image: linear-gradient(
+        0deg,
+        rgba(170, 170, 170, 0.8) 5%,
+        rgba(0, 0, 0, 0)
+      );
+    }
 
-  .van-cell {
-    background-color: rgba(0, 0, 0, 0);
-  }
+    .van-cell {
+      background-color: rgba(255, 255, 255, 0.5);
+    }
 
-  .van-checkbox__icon--checked {
-    background: #fff;
+    .van-checkbox__icon--checked {
+      background: #fff;
 
-    .van-icon-success {
-      background: $themeColor;
-      border-color: $themeColor;
+      .van-icon-success {
+        background: $themeColor;
+        border-color: $themeColor;
+      }
     }
-  }
 
-  .van-checkbox__label--disabled {
-    color: #323233;
+    .van-checkbox__label--disabled {
+      color: #323233;
+    }
   }
 }
 </style>