support-game
/
wechat
Segui 0
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Activity
Sfoglia il codice sorgente

merge

zjxpcyc 6 anni fa
parent
7d3eef2d13 456e484d36
commit
600ac5b206
17 ha cambiato i file con 868 aggiunte e 318 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1
    0
      public/index.html
  2. 14
    17
      src/App.vue
  3. BIN
      src/assets/bgimage.jpg
  4. 3
    0
      src/assets/css/theme.scss
  5. 0
    0
      src/assets/icon/dianhua.png
  6. 0
    0
      src/assets/icon/xiegenjin.png
  7. 0
    0
      src/assets/icon/xin.png
  8. 0
    0
      src/assets/icon/yinyueoff.png
  9. 0
    0
      src/assets/icon/yinyueon.png
  10. BIN
      src/assets/icon/yjsuploadimg.png
  11. BIN
      src/assets/yttjbg.png
  12. 20
    5
      src/components/music.vue
  13. 8
    8
      src/store/vote.js
  14. 96
    24
      src/views/vote/detail.vue
  15. 44
    5
      src/views/vote/index.vue
  16. 392
    128
      src/views/vote/list.vue
  17. 290
    131
      src/views/vote/signup.vue

+ 1
- 0
public/index.html Vedi File 

@@ -2,6 +2,7 @@
2 2 
 <html lang="en">
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 
+    <meta name="apple-mobile-web-app-capable" content="yes">
5 6 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 7 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8" />
7 8 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">

+ 14
- 17
src/App.vue Vedi File 

@@ -1,34 +1,32 @@
1 1 
 <template>
2 2 
   <div id="app" v-if="showPage">
3 3 
     <router-view/>
4 
-    <music :url="activity.Music"> </music>
4 
+    <music :url="activity.Music"></music>
5 5 
   </div>
6 6 
 </template>
7 7
8 8 
 <script>
9 
-import './assets/css/reset.css'
10 
-import { createNamespacedHelpers } from 'vuex'
11 
-import music from './components/music.vue'
12 
-const { mapActions: mapIndexActions } = createNamespacedHelpers('vote')
13 
-const {
14 
-  mapState: mapactivityState,
15 
-} = createNamespacedHelpers("vote");
9 
+import "./assets/css/reset.css";
10 
+import { createNamespacedHelpers } from "vuex";
11 
+import music from "./components/music.vue";
12 
+const { mapActions: mapIndexActions } = createNamespacedHelpers("vote");
13 
+const { mapState: mapactivityState } = createNamespacedHelpers("vote");
16 14
17 15 
 export default {
18 
-  data () {
16 
+  data() {
19 17 
     return {
20 
-      showPage: true,
21 
-    }
18 
+      showPage: true
19 
+    };
22 20 
   },
23 21 
   components: {
24 
-    music,
22 
+    music
25 23 
   },
26 24 
   computed: {
27 25 
     ...mapactivityState({
28 
-      activity: s => s.activity || {},
26 
+      activity: s => s.activity || {}
29 27 
     })
30 28 
   },
31 
-  created () {
29 
+  created() {
32 30 
     // if (location.search && this.toolClass.UrlSearch(location.search).code) {
33 31 
     //   this.code = this.toolClass.UrlSearch(location.search).code
34 32 
     //   let oldCode = localStorage.getItem('code')
 
@@ -44,12 +42,11 @@ export default {
44 42 
     // } else {
45 43 
     //   this.toolClass.getCode('wx32e2e8c81f66070e')
46 44 
     // }
47 
-
48 45 
   },
49 46 
   methods: {
50 
-    ...mapIndexActions(['user'])
47 
+    ...mapIndexActions(["user"])
51 48 
   }
52 
-}
49 
+};
53 50 
 </script>
54 51
55 52

BIN
src/assets/bgimage.jpg Vedi File


+ 3
- 0
src/assets/css/theme.scss Vedi File 

@@ -5,4 +5,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
5 5 
 /*按钮颜色*/
6 6 
 $btn_fastener:rgba(166,184,201,1);
7 7 
 $input_box:rgba(201,214,224,1);
8 
+$vote_btn:rgba(166,184,201,1);
9 
+$Latest_upload:rgba(166,184,201,1);
10 
+$top_color:rgba(217,226,233,1);
8 11

src/assets/icon/yjs_icon_phone.png → src/assets/icon/dianhua.png Vedi File


src/assets/icon/yjs_icon_pen.png → src/assets/icon/xiegenjin.png Vedi File


src/assets/icon/yjs_icon_love.png → src/assets/icon/xin.png Vedi File


src/assets/icon/yjs_icon_music_close.png → src/assets/icon/yinyueoff.png Vedi File


src/assets/icon/yjs_icon_music_open.png → src/assets/icon/yinyueon.png Vedi File


BIN
src/assets/icon/yjsuploadimg.png Vedi File


BIN
src/assets/yttjbg.png Vedi File


+ 20
- 5
src/components/music.vue Vedi File 

@@ -2,23 +2,29 @@
2 2 
     <div class="musicbox">
3 3 
       <!-- 播放 -->
4 4 
       <div class="play" v-if="audioPlayShow" @click="audioState">
5 
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png">
6 
-        <!-- <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png"> -->
5 
+        <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png">
7 6 
       </div>
8 7 
       <!-- 暂停-->
9 8 
       <div class="play" v-else @click="audioState">
10 
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" >
11 
-         <!-- <img v-if="this.$route.query.actid===2" src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" > -->
9 
+         <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" >
12 10 
       </div>
13 11 
       <audio ref="player" :src="url" autoplay preload loop="loop"></audio>
14 12 
     </div>
15 13 
 </template>
16 14 
 <script>
15 
+// import { createNamespacedHelpers } from 'vuex'
16 
+// const {
17 
+//   mapState: mapactivityState,
18 
+// } = createNamespacedHelpers("vote");
17 19 
 export default {
18 20 
   name:'music',
19 21 
   props:['url'],
20 22 
   data() {
21 23 
     return {
24 
+      yttjmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png',
25 
+      yjsmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yinyueon.png',
26 
+      yttjmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png',
27 
+      yjsmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yinyueoff.png',
22 28 
       audioPlayShow: true,
23 29 
     };
24 30 
   },

@@ -38,13 +44,22 @@ export default {
38 44 
 </script>
39 45
40 46 
 <style lang="scss" scoped>
47 
+// @keyframes changDeg{
48 
+// 			0%{
49 
+// 				transform: rotate(0deg);
50 
+// 			}
51 
+// 			100%{
52 
+// 				transform: rotate(360deg);
53 
+// 			}
54 
+// 		}
41 55 
   .musicbox {
42 56 
     position: fixed;
43 
-    top: 1.27rem;
57 
+    top: 0.09rem;
44 58 
     right: 0.09rem;
45 59 
     width: 0.24rem;
46 60 
     height: 0.24rem;
47 61 
     border-radius: 50%;
62 
+    z-index: 10;
48 63
49 64 
     .play {
50 65 
       width: 100%;

+ 8
- 8
src/store/vote.js Vedi File 

@@ -12,13 +12,13 @@ export default {
12 12 
     list: [],
13 13 
   },
14 14 
   mutations: {
15 
-    updateActivity (state, data) {
15 
+    updateActivity(state, data) {
16 16 
       state.activity = data || {}
17 17 
     },
18 
-    updateUser (state, data) {
18 
+    updateUser(state, data) {
19 19 
       state.user = data
20 20 
     },
21 
-    updateDetail (state, data) {
21 
+    updateDetail(state, data) {
22 22 
       state.detail = data || {}
23 23 
     },
24 24 
     updateMine (state, data) {
 
@@ -82,7 +82,7 @@ export default {
82 82 
         }).catch(reject)
83 83 
       })
84 84 
     },
85 
-    vote (m, payload) {
85 
+    vote(m, payload) {
86 86 
       return new Promise((resolve, reject) => {
87 87 
         ajax({
88 88 
           ...api.voteing.vote,
 
@@ -98,7 +98,7 @@ export default {
98 98 
         }).catch(reject)
99 99 
       })
100 100 
     },
101 
-    voteMember ({ commit }, payload) {
101 
+    voteMember({ commit }, payload) {
102 102 
       return new Promise((resolve, reject) => {
103 103 
         ajax({
104 104 
           ...api.voteing.registe,
 
@@ -114,7 +114,7 @@ export default {
114 114 
         }).catch(reject)
115 115 
       })
116 116 
     },
117 
-    getUser ({ commit }, { code }) {
117 
+    getUser({ commit }, { code }) {
118 118 
       return new Promise((resolve, reject) => {
119 119 
         ajax({
120 120 
           ...api.voteing.user,
 
@@ -127,7 +127,7 @@ export default {
127 127 
         }).catch(reject)
128 128 
       })
129 129 
     },
130 
-    getList ({ commit }, payload) {
130 
+    getList({ commit }, payload) {
131 131 
       return new Promise((resolve, reject) => {
132 132 
         ajax({
133 133 
           ...api.voteing.list,
 
@@ -141,7 +141,7 @@ export default {
141 141 
         }).catch(reject)
142 142 
       })
143 143 
     },
144 
-    getTopList ({ commit }, payload) {
144 
+    getTopList({ commit }, payload) {
145 145 
       return new Promise((resolve, reject) => {
146 146 
         ajax({
147 147 
           ...api.voteing.list,

+ 96
- 24
src/views/vote/detail.vue Vedi File 

@@ -1,27 +1,27 @@
1 1 
 <template>
2 
-  <div class="context">
2 
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
3 3 
     <div class="ContextbBox">
4 
-      <span class="personnumber">NO.{{detail.MemberId}}</span>
4 
+      <span :class="desc?personnumber1:personnumber2">NO.{{detail.MemberId}}</span>
5 5 
       <span class="votelist" @click="tolist">投票列表</span>
6 6 
       <img :src="detail.Photo">
7 7 
       <div class="detailinformation">
8 8 
         <div class="nameinformation">
9 
-          <span class="information">{{detail.Name}}</span>
10 
-          <span class="information">姓名</span>
9 
+          <span :class="desc?information1:information2">{{detail.Name}}</span>
10 
+          <span :class="desc?information1:information2">姓名</span>
11 11 
         </div>
12 
-        <span class="line"></span>
12 
+        <span :class="desc?line1:line2"></span>
13 13 
         <div class="nameinformation">
14 
-          <span class="informationnum">{{detail.Vote}}</span>
15 
-          <span class="information">当前票数</span>
14 
+          <span :class="desc?informationnum1:informationnum2">{{detail.Vote}}</span>
15 
+          <span :class="desc?information1:information2">当前票数</span>
16 16 
         </div>
17 
-        <span class="line"></span>
17 
+        <span :class="desc?line1:line2"></span>
18 18 
         <div class="nameinformation">
19 
-          <span class="information">{{detail.Rank}}名</span>
20 
-          <span class="information">排名</span>
19 
+          <span :class="desc?information1:information2">{{detail.Rank}}名</span>
20 
+          <span :class="desc?information1:information2">排名</span>
21 21 
         </div>
22 22 
       </div>
23 23 
     </div>
24 
-    <button class="votebtn" @click="Vote">投TA一票</button>
24 
+    <button :class="desc?votebtn1:votebtn2" @click="Vote">投TA一票</button>
25 25 
     <div class="showorhide" v-if="detail.Message != ''">
26 26 
       <span class="dashedline"></span>
27 27 
       <span class="writeword">寄语：{{detail.Message}}</span>
 
@@ -33,6 +33,8 @@
33 33 
 import { createNamespacedHelpers } from 'vuex'
34 34 
 import wxsdk from '../../util/share.js'
35 35 
 import toast from '../../components/toast.vue'
36 
+import BgImg from "../../assets/bgimg.jpg";
37 
+import BgImage from "../../assets/yttjbg.png";
36 38
37 39 
 const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
38 40 
 export default {
 
@@ -42,6 +44,20 @@ export default {
42 44 
       actid: '',
43 45 
       memberid: '',
44 46 
       show: false,
47 
+      coverImgUrl:true,
48 
+      BgImg,
49 
+      BgImage,
50 
+      desc:true,
51 
+      personnumber1:'personnumber1',
52 
+      personnumber2:'personnumber2',
53 
+      information1:'information1',
54 
+      information2:'information2',
55 
+      informationnum1:'informationnum1',
56 
+      informationnum2:"informationnum2",
57 
+      line1:'line1',
58 
+      line2:'line2',
59 
+      votebtn1:'votebtn1',
60 
+      votebtn2:'votebtn2',
45 61 
     };
46 62 
   },
47 63 
   components: {
 
@@ -49,6 +65,13 @@ export default {
49 65 
   },
50 66 
   mounted() {
51 67 
     this.actid = this.$route.params.actid;
68 
+    if(this.actid==1){
69 
+ this.coverImgUrl = true;
70 
+ this.desc = true;
71 
+    }else if(this.actid==2){
72 
+this.coverImgUrl = false;
73 
+this.desc = false;
74 
+    }
52 75 
     this.memberid = this.$route.params.memberid;
53 76 
     this.getActivity({
54 77 
       actid: this.actid,
 
@@ -113,7 +136,7 @@ export default {
113 136 
 .context {
114 137 
   width: 100%;
115 138 
   height: 100%;
116 
-  background-color: rgba(220,229,236,1);;
139 
+  // background-color: rgba(220,229,236,1);;
117 140 
   display: flex;
118 141 
   flex-direction: column;
119 142 
   align-items: center;
 
@@ -129,7 +152,7 @@ export default {
129 152 
     align-items: center;
130 153 
     position: relative;
131 154
132 
-    .personnumber {
155 
+    .personnumber1 {
133 156 
       position: absolute;
134 157 
       top: 0;
135 158 
       background-color:rgba(255,255,255,1);
 
@@ -137,10 +160,22 @@ export default {
137 160 
       padding: 0.01rem 0.25rem;
138 161 
       font-size: 0.18rem;
139 162 
       font-family: PingFangSC-Medium;
140 
-      font-weight: 500;
163 
+      font-weight: bolder;
141 164 
       color:rgba(70,86,101,1);
142 165 
       line-height: 0.25rem;
143 166 
     }
167 
+    .personnumber2 {
168 
+      position: absolute;
169 
+      top: 0;
170 
+      background-color:rgba(255,255,255,1);
171 
+      border-radius: 0 0 0.12rem 0.12rem;
172 
+      padding: 0.01rem 0.25rem;
173 
+      font-size: 0.18rem;
174 
+      font-family: PingFangSC-Medium;
175 
+      font-weight: bolder;
176 
+      color:rgba(112,84,75,1);
177 
+      line-height: 0.25rem;
178 
+    }
144 179
145 180 
     .votelist {
146 181 
       position: absolute;
 
@@ -151,7 +186,7 @@ export default {
151 186 
       padding: 0.05rem 0.05rem 0.05rem 0.16rem;
152 187 
       font-size: 0.18rem;
153 188 
       font-family: PingFangSC-Medium;
154 
-      font-weight: 500;
189 
+      font-weight: bolder;
155 190 
       color: rgba(255, 255, 255, 1);
156 191 
       line-height: 0.25rem;
157 192 
     }
 
@@ -167,9 +202,14 @@ export default {
167 202 
       flex-direction: row;
168 203 
       justify-content: space-between;
169 204
170 
-      .line {
171 
-        width: 0.01rem;
172 
-        border: 1px solid rgba(166,184,201,1);
205 
+      .line1 {
206 
+        // width: 0.01rem;
207 
+        border: 0.01rem solid rgba(166,184,201,1);
208 
+        background-color: rgba(166,184,201,1);
209 
+      }
210 
+      .line2 {
211 
+        // width: 0.01rem;
212 
+        border: 0.01rem solid rgba(166,184,201,1);
173 213 
         background-color: rgba(166,184,201,1);
174 214 
       }
175 215 
       .nameinformation {
 
@@ -177,31 +217,63 @@ export default {
177 217 
         flex-direction: column;
178 218 
         align-items: center;
179 219
180 
-        .information {
220 
+        .information1 {
181 221 
           font-size: 0.16rem;
182 222 
           font-family: JQLaoSongJT;
183 223 
           color:rgba(112,125,138,1);
184 224 
           line-height: 0.28rem;
185 
-          font-weight: 400;
225 
+          font-weight: bold;
226 
+          height: 0.28rem;
227 
+        }
228 
+        .information2 {
229 
+          font-size: 0.16rem;
230 
+          font-family: JQLaoSongJT;
231 
+          color:rgba(112,84,75,1);
232 
+          line-height: 0.28rem;
233 
+          font-weight: bold;
234 
+           height: 0.28rem;
186 235 
         }
187 
-        .informationnum {
236 
+        .informationnum1 {
188 237 
           font-size: 0.24rem;
189 238 
           font-family: JQLaoSongJT;
190 239 
           color:rgba(112,125,138,1);
240 
+          font-weight: bolder;
241 
+          line-height: 0.28rem;
242 
+           height: 0.28rem;
243 
+        }
244 
+          .informationnum2 {
245 
+          font-size: 0.24rem;
246 
+          font-family: JQLaoSongJT;
247 
+          color:rgba(112,84,75,1);
248 
+          font-weight: bolder;
191 249 
           line-height: 0.28rem;
250 
+           height: 0.28rem;
192 251 
         }
193 252 
       }
194 253 
     }
195 254 
   }
196 255
197 
-  .votebtn {
256 
+  .votebtn1 {
198 257 
     width: 59%;
199 258 
     height: 0.42rem;
200 259 
     background: rgba(166,184,201,1);
201 260 
     border-radius: 0.23rem;
202 261 
     font-size: 0.2rem;
203 262 
     font-family: PingFangSC-Medium;
204 
-    font-weight: 500;
263 
+    font-weight: bolder;
264 
+    color: rgba(255, 255, 255, 1);
265 
+    line-height: 0.28rem;
266 
+    border: none;
267 
+    margin-top: 0.18rem;
268 
+  }
269 
+  .votebtn2{
270 
+    width: 59%;
271 
+    height: 0.42rem;
272 
+    background: rgba(173,145,129,1);
273 
+    border-radius: 0.23rem;
274 
+    font-size: 0.2rem;
275 
+    font-family: PingFangSC-Medium;
276 
+    font-weight: bolder;
205 277 
     color: rgba(255, 255, 255, 1);
206 278 
     line-height: 0.28rem;
207 279 
     border: none;
 
@@ -227,7 +299,7 @@ export default {
227 299 
       word-break: normal;
228 300 
       font-size: 0.14rem;
229 301 
       font-family: PingFangSC-Regular;
230 
-      font-weight: 400;
302 
+      font-weight: bold;
231 303 
       color: rgba(77,87,97,1);
232 304 
       line-height: 0.2rem;
233 305 
     }

+ 44
- 5
src/views/vote/index.vue Vedi File 

@@ -1,7 +1,7 @@
1 1 
 <template>
2 2 
   <div class="indexpage">
3 3 
     <img class="bgimg" :src="activity.Thumb">
4 
-    <button class="EnterActivity" @click="gotoactivity">进入活动</button>
4 
+    <button :class="enter?'classone':'classtwo'" @click="gotoactivity">进入活动</button>
5 5 
   </div>
6 6 
 </template>
7 7 
 
@@ -16,10 +16,18 @@ export default {
16 16 
   name: "index",
17 17 
   data() {
18 18 
     return {
19 
+      enter: true,
20 
+      classone: "classone",
21 
+      classtwo: "classtwo",
19 22 
       actid: this.$route.query.actid
20 23 
     };
21 24 
   },
22 25 
   created() {
26 
+    if (this.$route.query.actid == 1) {
27 
+      this.enter = true;
28 
+    } else if (this.$route.query.actid == 2) {
29 
+      this.enter = false;
30 
+    }
23 31 
     this.getActivity({
24 32 
       actid: this.actid,
25 33 
     })
 
@@ -38,7 +46,7 @@ export default {
38 46 
       this.$router.push({
39 47 
         path: `/vote/${this.actid}`
40 48 
       });
41 
-    },
49 
+    }
42 50 
   }
43 51 
 };
44 52 
 </script>
 
@@ -53,7 +61,7 @@ export default {
53 61 
     width: 100%;
54 62 
     height: 100%;
55 63 
   }
56 
-  .EnterActivity {
64 
+  .classone {
57 65 
     width: 75%;
58 66 
     height: 0.5rem;
59 67 
     border-radius: 0.25rem;
 
@@ -61,12 +69,43 @@ export default {
61 69 
     border: none;
62 70 
     font-size: 0.2rem;
63 71 
     font-family: PingFangSC-Medium;
64 
-    font-weight: bold;
72 
+    font-weight: bolder;
65 73 
     color: white;
66 74 
     line-height: 0.28rem;
67 75 
     position: fixed;
68 76 
     bottom: 0.4rem;
69 
-    left:calc(12.5%);
77 
+    left: calc(12.5%);
70 78 
   }
79 
+  .classtwo {
80 
+    width: 75%;
81 
+    height: 0.5rem;
82 
+    border-radius: 0.25rem;
83 
+    background: rgba(173, 145, 129, 1);
84 
+    border: none;
85 
+    font-size: 0.2rem;
86 
+    font-family: PingFangSC-Medium;
87 
+    font-weight: bolder;
88 
+    color: white;
89 
+    line-height: 0.28rem;
90 
+    position: fixed;
91 
+    bottom: 0.4rem;
92 
+    left: calc(12.5%);
93 
+  }
94 
+
95 
+  // .EnterActivity {
96 
+  //   width: 75%;
97 
+  //   height: 0.5rem;
98 
+  //   border-radius: 0.25rem;
99 
+  //   background: #a6b8c9;
100 
+  //   border: none;
101 
+  //   font-size: 0.2rem;
102 
+  //   font-family: PingFangSC-Medium;
103 
+  //   font-weight: bold;
104 
+  //   color: white;
105 
+  //   line-height: 0.28rem;
106 
+  //   position: fixed;
107 
+  //   bottom: 0.4rem;
108 
+  //   left:calc(12.5%);
109 
+  // }
71 110 
 }
72 111 
 </style>

+ 392
- 128
src/views/vote/list.vue Vedi File 

@@ -1,17 +1,23 @@
1 1 
 <template>
2 
-  <div class="context">
2 
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}"   @touchstart='touchStart'
3 
+                      @touchmove='touchMove'>
3 4 
     <img class="BannerImage" :src="activity.Banner">
4 
-    <div :class="isOK?searchs:searchb">
5 
-      <input placeholder="输入编号或姓名" v-model="q">
6 
-      <img class="IconSearch" :src="IconSearch" @click="search">
7 
-      <!-- <i class="iconfont icon-sousuo3 IconSearch"></i> -->
5 
+    <div :class="IsOk?onscroll1:onscroll2">
6 
+      <div :class="isOK?searchs:searchb">
7 
+        <input placeholder="输入编号或姓名" v-model="q">
8 
+        <img class="IconSearch" :src="IconSearch" @click="search">
9 
+      </div>
8 10 
     </div>
9 11 
     <img class="informationimg" :src="activity.Desc">
10 12 
     <span class="box"></span>
11 13 
     <div class="VoteListBox">
12 14 
       <div class="VoteList">
13 15 
         <van-tabs type="card" @click="finished = false">
14 
-          <van-tab title="最新上传">
16 
+          <van-tab>
17 
+            <div slot="title">
18 
+              <span v-if="first" :class="active?newly1:newly2">最新上传</span>
19 
+              <span v-else :class="active?newlyone:newlytwo">最新上传</span>
20 
+            </div>
15 21 
             <van-list
16 22 
               v-model="loading"
17 23 
               :finished="finished"
 
@@ -35,6 +41,10 @@
35 41 
             </van-list>
36 42 
           </van-tab>
37 43 
           <van-tab title="TOP50">
44 
+            <div slot="title">
45 
+              <span v-if="first" :class="active?newly1:newly2">TOP50</span>
46 
+              <span v-else :class="active?newlyone:newlytwo">TOP50</span>
47 
+            </div>
38 48 
             <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadTopList">
39 49 
             <div class="LatestUpload">
40 50 
               <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
 
@@ -55,7 +65,7 @@
55 65 
         </van-tabs>
56 66 
       </div>
57 67 
     </div>
58 
-    <button class="signupBtn" @click="signup">我要报名</button>
68 
+    <button :class="signupBtn?'signupBtnOne':'signupBtnTwo'" @click="signup">我要报名</button>
59 69 
     <toast v-if="show" :url="activity.AfterVote" @close="close" @confirmbtn="tolink"></toast>
60 70 
   </div>
61 71 
 </template>
 
@@ -64,6 +74,9 @@
64 74 
 import { createNamespacedHelpers } from "vuex"
65 75 
 import wxsdk from '../../util/share.js'
66 76 
 import toast from '../../components/toast.vue'
77 
+import BgImg from "../../assets/bgimg.jpg";
78 
+import BgImage from "../../assets/yttjbg.png";
79 
+// import toast from "../../components/toast.vue";
67 80
68 81 
 const {
69 82 
   mapState: mapactivityState,
 
@@ -74,10 +87,37 @@ export default {
74 87 
   name: "lotterylist",
75 88 
   data() {
76 89 
     return {
77 
-      // AudioPlay: ''
78 
-      isOK:true,
79 
-      searchs:'searchs',
80 
-      searchb:'searchb',
90 
+       startY:0,//开始触摸的位置
91 
+      moveY:0,//滑动时的位置
92 
+      endX:0,//结束触摸的位置
93 
+      disY:0,//移动距离
94 
+      first: false,
95 
+      second: false,
96 
+      active: true,
97 
+      isactive: true,
98 
+      newly1: "newly1",
99 
+      newly2: "newly2",
100 
+      newlyone: "newlyone",
101 
+      newlytwo: "newlytwo",
102 
+      temp: true,
103 
+      signupBtn: true,
104 
+      signupBtnOne: "signupBtnOne",
105 
+      signupBtnTwo: "signupBtnTwo",
106 
+      VoteBtn1: "VoteBtn1",
107 
+      VoteBtn2: "VoteBtn2",
108 
+      ballot1: "ballot1",
109 
+      ballot2: "ballot2",
110 
+      coverImgUrl: true,
111 
+      isOK: true,
112 
+      IsOk: true,
113 
+      searchs: "searchs",
114 
+      searchb: "searchb",
115 
+      onscroll1: "onscroll1",
116 
+      onscroll2: "onscroll2",
117 
+      ActivePersonnelBox1: "ActivePersonnelBox1",
118 
+      ActivePersonnelBox2: "ActivePersonnelBox2",
119 
+      BgImg,
120 
+      BgImage,
81 121 
       IconSearch:
82 122 
         "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png",
83 123 
       tab: "",
 
@@ -96,6 +136,10 @@ export default {
96 136 
   },
97 137 
   mounted() {
98 138 
     window.addEventListener("scroll", this.handleScroll, true);
139 
+
140 
+    // var mybody = document.getElementsByTagName('body')[0]
141 
+    // mybody.addEventListener("touchstart", this.touchstart);
142 
+    // mybody.addEventListener("touchmove", this.touchmove);
99 143 
     // 监听（绑定）滚轮 滚动事件
100 144 
   },
101 145 
   computed: {
 
@@ -109,6 +153,17 @@ export default {
109 153 
   created() {
110 154 
     this.pageSize = this.$store.state.pageSize
111 155 
     this.actid = this.$route.params.actid
156 
+    if (this.actid == 1) {
157 
+      this.coverImgUrl = true;
158 
+      this.signupBtn = true;
159 
+      this.isOK = true;
160 
+      this.first = true;
161 
+    } else if (this.actid == 2) {
162 
+      this.coverImgUrl = false;
163 
+      this.signupBtn = false;
164 
+      this.isOK = false;
165 
+      this.second = true;
166 
+    }
112 167 
     this.getActivity({
113 168 
       actid: this.actid,
114 169 
     }).then((act) => {
 
@@ -146,21 +201,41 @@ export default {
146 201 
       'vote',
147 202 
       'getMine',
148 203 
     ]),
204 
+    qh(t) {
205 
+      this.temp = t;
206 
+      if (t == true) {
207 
+        this.active = true;
208 
+        this.isactive = true;
209 
+      } else {
210 
+        this.active = false;
211 
+        this.isactive = false;
212 
+      }
213 
+    },
214 
+
149 215 
     handleScroll() {
150 216 
       // 页面滚动距顶部距离
151 217 
       var scrollTop =
152 218 
         window.pageYOffset ||
153 219 
         document.documentElement.scrollTop ||
154 220 
         document.body.scrollTop;
155 
-         window.console.log(scrollTop);
156 
-         if(scrollTop>=280){
157 
-          this.isOK =false;
158 
-        }else {
159 
-          this.isOK=true;
160 
-        }
221 
+      if (scrollTop >= 269) {
222 
+        this.IsOk = false;
223 
+      } else {
224 
+        this.IsOk = true;
225 
+      }
226 
+    },
227 
+
228 
+    onLoad() {
229 
+      // 异步更新数据
230 
+      // setTimeout(() => {
231 
+      //   for (let i = 0; i < 10; i++) {
232 
+      //     this.list.push(this.list.length + 1);
233 
+      //   }
234 
+      //   // 加载状态结束
235 
+      //   this.loading = false;
161 236
162 
-      // var scroll = scrollTop - this.i;
163 
-      this.i = scrollTop;
237 
+      // // var scroll = scrollTop - this.i;
238 
+      // this.i = scrollTop;
164 239
165 240 
       // if (scroll < 0) {
166 241 
       //   this.isFixed =false;
 
@@ -171,6 +246,7 @@ export default {
171 246 
       //   }
172 247 
       //   console.log("down");
173 248 
       // }
249 
+      // }
174 250 
     },
175 251 
     newlist() {
176 252 
       return this.getList({
 
@@ -265,42 +341,8 @@ export default {
265 341 
 </script>
266 342
267 343 
 <style>
268 
-.van-tabs--card {
269 
-  width: 100%;
270 
-}
271 
-.van-tabs__nav--card {
272 
-  height: 100%;
273 
-  border: none;
274 
-  margin: 0;
275 
-}
276 
-.van-tabs__wrap {
344 
+.van-list {
277 345 
   width: 100%;
278 
-  z-index: 0;
279 
-}
280 
-.van-tabs__nav--card .van-tab.van-tab--active {
281 
-  background-color: rgba(166, 184, 201, 1);
282 
-  border-radius: 0.06rem;
283 
-}
284 
-.van-tabs--card .van-tabs__wrap {
285 
-  height: 0.4rem;
286 
-}
287 
-.van-tabs__nav--card .van-tab {
288 
-  border-right: none;
289 
-  background-color: rgba(217, 226, 233, 1);
290 
-  border-radius: 0.06rem;
291 
-  width: 100%;
292 
-  margin: 0 0.075rem;
293 
-  display: flex;
294 
-  justify-content: center;
295 
-  align-items: center;
296 
-}
297 
-.van-ellipsis {
298 
-  font-size: 0.16rem;
299 
-  font-family: PingFangSC-Medium;
300 
-  font-weight: bold;
301 
-  color: rgba(255, 255, 255, 1);
302 
-  line-height: 0.22rem;
303 
-  text-align: center;
304 346 
 }
305 347 
 </style>
306 348 
 
@@ -308,7 +350,7 @@ export default {
308 350 
 <style lang="scss" scoped>
309 351 
 .context {
310 352 
   width: 100%;
311 
-  background-color: rgba(209, 220, 228, 1);
353 
+  // background-color: rgba(209, 220, 228, 1);
312 354 
   display: flex;
313 355 
   flex-direction: column;
314 356 
   justify-content: center;
 
@@ -318,84 +360,185 @@ export default {
318 360 
     width: 100%;
319 361 
     height: 3.4rem;
320 362 
   }
321 
-.searchb{
322 
-  width: 93%;
363 
+
364 
+  .onscroll1 {
365 
+    width: 90%;
323 366 
     height: 0.44rem;
324 
-    background-color: rgba(201, 214, 224, 1);
325 
-    border-radius: 6px;
326 
-    border: 0.01rem solid rgba(255, 255, 255, 1);
327 
-    display: flex;
328 
-    flex-direction: row;
329 
-    justify-content: space-between;
330 
-    align-items: center;
331 
-    position: fixed;
332 
-    top: 0;
333 
-    left: calc(3.1%);
367 
+    position: absolute;
368 
+    top: 2.8rem;
369 
+    left: calc(5%);
334 370
335 
-    input {
336 
-      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
337 
-      background-color: rgba(255, 255, 255, 0);
338 
-      color: rgba(255, 255, 255, 1);
339 
-      font-size: 0.16rem;
340 
-      font-family: PingFangSC-Regular;
341 
-      font-weight: 400;
342 
-      line-height: 0.22rem;
343 
-      width: 5rem;
344 
-      text-indent: 0.1rem;
345 
-    }
346 
-    input::-webkit-input-placeholder {
347 
-      color: rgba(255, 255, 255, 1);
348 
-      font-size: 0.16rem;
349 
-      font-family: PingFangSC-Regular;
350 
-      font-weight: 400;
351 
-      line-height: 0.22rem;
371 
+    .searchb {
372 
+      width: 100%;
373 
+      height: 100%;
374 
+      background-color: rgba(118, 89, 81, 1);
375 
+      border-radius: 0.22rem;
376 
+      border: 0.01rem solid rgba(255, 255, 255, 1);
377 
+      display: flex;
378 
+      flex-direction: row;
379 
+      justify-content: space-between;
380 
+      align-items: center;
381 
+
382 
+      input {
383 
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
384 
+        background-color: rgba(255, 255, 255, 0);
385 
+        color: rgba(255, 255, 255, 1);
386 
+        font-size: 0.16rem;
387 
+        font-family: PingFangSC-Regular;
388 
+        font-weight: bold;
389 
+        line-height: 0.22rem;
390 
+        width: 3rem;
391 
+        text-indent: 0.14rem;
392 
+      }
393 
+      input::-webkit-input-placeholder {
394 
+        color: rgba(255, 255, 255, 1);
395 
+        font-size: 0.16rem;
396 
+        font-family: PingFangSC-Regular;
397 
+        font-weight: bold;
398 
+        line-height: 0.22rem;
399 
+      }
400 
+      .IconSearch {
401 
+        width: 0.2rem;
402 
+        height: 0.2rem;
403 
+        margin-right: 0.14rem;
404 
+      }
352 405 
     }
353 
-    .IconSearch {
354 
-      width: 0.2rem;
355 
-      height: 0.2rem;
356 
-      margin-right: 0.1rem;
406 
+  }
407 
+
408 
+  .onscroll2 {
409 
+    width: 90%;
410 
+    height: 0.44rem;
411 
+    position: fixed;
412 
+    top: 0.11rem;
413 
+    left: calc(5%);
414 
+
415 
+    .searchb {
416 
+      width: 100%;
417 
+      height: 100%;
418 
+      background-color: rgba(118, 89, 81, 1);
419 
+      border-radius: 0.22rem;
420 
+      border: 0.01rem solid rgba(255, 255, 255, 1);
421 
+      display: flex;
422 
+      flex-direction: row;
423 
+      justify-content: space-between;
424 
+      align-items: center;
425 
+
426 
+      input {
427 
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
428 
+        background-color: rgba(255, 255, 255, 0);
429 
+        color: rgba(255, 255, 255, 1);
430 
+        font-size: 0.16rem;
431 
+        font-family: PingFangSC-Regular;
432 
+        font-weight: bold;
433 
+        line-height: 0.22rem;
434 
+        width: 3rem;
435 
+        text-indent: 0.14rem;
436 
+      }
437 
+      input::-webkit-input-placeholder {
438 
+        color: rgba(255, 255, 255, 1);
439 
+        font-size: 0.16rem;
440 
+        font-family: PingFangSC-Regular;
441 
+        font-weight: bold;
442 
+        line-height: 0.22rem;
443 
+      }
444 
+      .IconSearch {
445 
+        width: 0.2rem;
446 
+        height: 0.2rem;
447 
+        margin-right: 0.14rem;
448 
+      }
357 449 
     }
450 
+  }
358 451
359 
-}
360 
-  .searchs {
452 
+  .onscroll1 {
361 453 
     width: 93%;
362 454 
     height: 0.44rem;
363 
-    background-color: rgba(201, 214, 224, 1);
364 
-    border-radius: 6px;
365 
-    border: 0.01rem solid rgba(255, 255, 255, 1);
366 
-    display: flex;
367 
-    flex-direction: row;
368 
-    justify-content: space-between;
369 
-    align-items: center;
370 455 
     position: absolute;
371 456 
     top: 2.8rem;
372 457 
     left: calc(3.1%);
373 458
374 
-    input {
375 
-      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
376 
-      background-color: rgba(255, 255, 255, 0);
377 
-      color: rgba(255, 255, 255, 1);
378 
-      font-size: 0.16rem;
379 
-      font-family: PingFangSC-Regular;
380 
-      font-weight: 400;
381 
-      line-height: 0.22rem;
382 
-      width: 5rem;
383 
-      text-indent: 0.1rem;
384 
-    }
385 
-    input::-webkit-input-placeholder {
386 
-      color: rgba(255, 255, 255, 1);
387 
-      font-size: 0.16rem;
388 
-      font-family: PingFangSC-Regular;
389 
-      font-weight: 400;
390 
-      line-height: 0.22rem;
459 
+    .searchs {
460 
+      width: 100%;
461 
+      height: 100%;
462 
+      background-color: rgba(201, 214, 224, 1);
463 
+      border-radius: 0.06rem;
464 
+      border: 0.01rem solid rgba(255, 255, 255, 1);
465 
+      display: flex;
466 
+      flex-direction: row;
467 
+      justify-content: space-between;
468 
+      align-items: center;
469 
+
470 
+      input {
471 
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
472 
+        background-color: rgba(255, 255, 255, 0);
473 
+        color: rgba(255, 255, 255, 1);
474 
+        font-size: 0.16rem;
475 
+        font-family: PingFangSC-Regular;
476 
+        font-weight: bold;
477 
+        line-height: 0.22rem;
478 
+        width: 3rem;
479 
+        text-indent: 0.1rem;
480 
+      }
481 
+      input::-webkit-input-placeholder {
482 
+        color: rgba(255, 255, 255, 1);
483 
+        font-size: 0.16rem;
484 
+        font-family: PingFangSC-Regular;
485 
+        font-weight: bold;
486 
+        line-height: 0.22rem;
487 
+      }
488 
+
489 
+      .IconSearch {
490 
+        width: 0.2rem;
491 
+        height: 0.2rem;
492 
+        margin-right: 0.1rem;
493 
+      }
391 494 
     }
495 
+  }
496 
+
497 
+  .onscroll2 {
498 
+    width: 93%;
499 
+    height: 0.44rem;
500 
+    position: fixed;
501 
+    top: 0.11rem;
502 
+    left: calc(3.1%);
503 
+
504 
+    .searchs {
505 
+      width: 100%;
506 
+      height: 100%;
507 
+      background-color: rgba(201, 214, 224, 1);
508 
+      border-radius: 0.06rem;
509 
+      border: 0.01rem solid rgba(255, 255, 255, 1);
510 
+      display: flex;
511 
+      flex-direction: row;
512 
+      justify-content: space-between;
513 
+      align-items: center;
514 
+
515 
+      input {
516 
+        // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
517 
+        background-color: rgba(255, 255, 255, 0);
518 
+        color: rgba(255, 255, 255, 1);
519 
+        font-size: 0.16rem;
520 
+        font-family: PingFangSC-Regular;
521 
+        font-weight: bold;
522 
+        line-height: 0.22rem;
523 
+        width: 3rem;
524 
+        text-indent: 0.1rem;
525 
+      }
526 
+      input::-webkit-input-placeholder {
527 
+        color: rgba(255, 255, 255, 1);
528 
+        font-size: 0.16rem;
529 
+        font-family: PingFangSC-Regular;
530 
+        font-weight: bold;
531 
+        line-height: 0.22rem;
532 
+      }
392 533
393 
-    .IconSearch {
394 
-      width: 0.2rem;
395 
-      height: 0.2rem;
396 
-      margin-right: 0.1rem;
534 
+      .IconSearch {
535 
+        width: 0.2rem;
536 
+        height: 0.2rem;
537 
+        margin-right: 0.1rem;
538 
+      }
397 539 
     }
398 540 
   }
541 
+
399 542 
   .informationimg {
400 543 
     width: 97%;
401 544 
     height: 6.24rem;
 
@@ -415,11 +558,78 @@ export default {
415 558 
     display: flex;
416 559 
     flex-direction: column;
417 560 
     align-items: center;
418 
-    margin-bottom: 0.19rem;
561 
+    margin-bottom: 1rem;
419 562
420 563 
     .VoteList {
421 564 
       margin: 0.26rem 0;
422 565 
       width: 90%;
566 
+      display: flex;
567 
+      flex-direction: column;
568 
+      align-items: center;
569 
+
570 
+      .sortlist1 {
571 
+        width: 94%;
572 
+        display: flex;
573 
+        flex-direction: row;
574 
+        justify-content: space-between;
575 
+
576 
+        .newly1 {
577 
+          width: 47.5%;
578 
+          font-size: 0.16rem;
579 
+          font-family: PingFangSC-Medium;
580 
+          font-weight: bolder;
581 
+          color: rgba(255, 255, 255, 1);
582 
+          line-height: 0.22rem;
583 
+          background: rgba(166, 184, 201, 1);
584 
+          border-radius: 0.06rem;
585 
+          text-align: center;
586 
+          padding: 0.09rem 0;
587 
+        }
588 
+        .newly2 {
589 
+          width: 47.5%;
590 
+          font-size: 0.16rem;
591 
+          font-family: PingFangSC-Medium;
592 
+          font-weight: bolder;
593 
+          color: rgba(255, 255, 255, 1);
594 
+          line-height: 0.22rem;
595 
+          background: rgba(217, 226, 233, 1);
596 
+          border-radius: 0.06rem;
597 
+          text-align: center;
598 
+          padding: 0.09rem 0;
599 
+        }
600 
+      }
601 
+
602 
+      .sortlist2 {
603 
+        width: 94%;
604 
+        display: flex;
605 
+        flex-direction: row;
606 
+        justify-content: space-between;
607 
+
608 
+        .newlyone {
609 
+          width: 47.5%;
610 
+          font-size: 0.16rem;
611 
+          font-family: PingFangSC-Medium;
612 
+          font-weight: bolder;
613 
+          color: rgba(255, 255, 255, 1);
614 
+          line-height: 0.22rem;
615 
+          background: rgba(126, 100, 86, 1);
616 
+          border-radius: 0.06rem;
617 
+          text-align: center;
618 
+          padding: 0.09rem 0;
619 
+        }
620 
+        .newlytwo {
621 
+          width: 47.5%;
622 
+          font-size: 0.16rem;
623 
+          font-family: PingFangSC-Medium;
624 
+          font-weight: bolder;
625 
+          color: rgba(255, 255, 255, 1);
626 
+          line-height: 0.22rem;
627 
+          background: rgba(173, 145, 129, 0.62);
628 
+          border-radius: 0.06rem;
629 
+          text-align: center;
630 
+          padding: 0.09rem 0;
631 
+        }
632 
+      }
423 633
424 634
425 635 
 
@@ -443,7 +653,7 @@ export default {
443 653 
           align-items: center;
444 654 
           position: relative;
445 655
446 
-          .ActivePersonnelBox {
656 
+          .ActivePersonnelBox1 {
447 657 
             width: 90%;
448 658 
             height: 1.83rem;
449 659 
             border-radius: 0.15rem;
 
@@ -456,7 +666,21 @@ export default {
456 666 
               border-radius: 0.1rem;
457 667 
             }
458 668 
           }
459 
-          .ballot {
669 
+          .ActivePersonnelBox2 {
670 
+            width: 90%;
671 
+            height: 1.83rem;
672 
+            border-radius: 0.15rem;
673 
+            margin-bottom: 0.11rem;
674 
+            border: 0.04rem solid rgba(126, 100, 86, 1);
675 
+
676 
+            img {
677 
+              width: 100%;
678 
+              height: 100%;
679 
+              border-radius: 0.1rem;
680 
+            }
681 
+          }
682 
+
683 
+          .ballot1 {
460 684 
             position: absolute;
461 685 
             top: 0;
462 686 
             background: rgba(166, 184, 201, 1);
 
@@ -464,7 +688,19 @@ export default {
464 688 
             padding: 0.02rem 0.12rem;
465 689 
             font-size: 0.14rem;
466 690 
             font-family: PingFangSC-Medium;
467 
-            font-weight: bold;
691 
+            font-weight: bolder;
692 
+            color: rgba(255, 255, 255, 1);
693 
+            line-height: 0.2rem;
694 
+          }
695 
+          .ballot2 {
696 
+            position: absolute;
697 
+            top: 0;
698 
+            background: rgba(126, 100, 86, 1);
699 
+            border-radius: 0 0 0.08rem 0.08rem;
700 
+            padding: 0.02rem 0.12rem;
701 
+            font-size: 0.14rem;
702 
+            font-family: PingFangSC-Medium;
703 
+            font-weight: bolder;
468 704 
             color: rgba(255, 255, 255, 1);
469 705 
             line-height: 0.2rem;
470 706 
           }
 
@@ -472,13 +708,13 @@ export default {
472 708 
           .ActivePersonnelName {
473 709 
             font-size: 0.16rem;
474 710 
             font-family: PingFangSC-Regular;
475 
-            font-weight: 400;
711 
+            font-weight: bold;
476 712 
             color: rgba(0, 0, 0, 1);
477 713 
             line-height: 0.22rem;
478 714 
             padding-bottom: 0.11rem;
479 715 
           }
480 716
481 
-          .VoteBtn {
717 
+          .VoteBtn1 {
482 718 
             width: 56%;
483 719 
             height: 0.23rem;
484 720 
             border-radius: 0.25rem;
 
@@ -486,7 +722,20 @@ export default {
486 722 
             border: none;
487 723 
             font-size: 0.14rem;
488 724 
             font-family: PingFangSC-Medium;
489 
-            font-weight: bold;
725 
+            font-weight: bolder;
726 
+            color: rgba(255, 255, 255, 1);
727 
+            line-height: 0.2rem;
728 
+            margin-bottom: 0.14rem;
729 
+          }
730 
+          .VoteBtn2 {
731 
+            width: 56%;
732 
+            height: 0.23rem;
733 
+            border-radius: 0.25rem;
734 
+            background-color: rgba(126, 100, 86, 1);
735 
+            border: none;
736 
+            font-size: 0.14rem;
737 
+            font-family: PingFangSC-Medium;
738 
+            font-weight: bolder;
490 739 
             color: rgba(255, 255, 255, 1);
491 740 
             line-height: 0.2rem;
492 741 
             margin-bottom: 0.14rem;
 
@@ -499,14 +748,14 @@ export default {
499 748 
             span {
500 749 
               font-size: 0.12rem;
501 750 
               font-family: PingFangSC-Medium;
502 
-              font-weight: bold;
751 
+              font-weight: bolder;
503 752 
               color: rgba(0, 0, 0, 1);
504 753 
               line-height: 0.17rem;
505 754 
             }
506 755 
             p {
507 756 
               font-size: 0.12rem;
508 757 
               font-family: PingFangSC-Medium;
509 
-              font-weight: bold;
758 
+              font-weight: bolder;
510 759 
               color: #f0737e;
511 760 
               line-height: 0.17rem;
512 761 
             }
 
@@ -515,7 +764,7 @@ export default {
515 764 
       }
516 765 
     }
517 766 
   }
518 
-  .signupBtn {
767 
+  .signupBtnOne {
519 768 
     width: 91%;
520 769 
     height: 0.5rem;
521 770 
     border-radius: 0.25rem;
 
@@ -530,6 +779,21 @@ export default {
530 779 
     bottom: 0.19rem;
531 780 
     left: calc(4.25%);
532 781 
   }
782 
+  .signupBtnTwo {
783 
+    width: 91%;
784 
+    height: 0.5rem;
785 
+    border-radius: 0.25rem;
786 
+    background: rgba(173, 145, 129, 1);
787 
+    border: none;
788 
+    font-size: 0.2rem;
789 
+    font-family: PingFangSC-Medium;
790 
+    font-weight: bold;
791 
+    color: rgba(255, 255, 255, 1);
792 
+    line-height: 0.28rem;
793 
+    position: fixed;
794 
+    bottom: 0.19rem;
795 
+    left: calc(4.25%);
796 
+  }
533 797 
 }
534 798 
 </style>
535 799

+ 290
- 131
src/views/vote/signup.vue Vedi File 

@@ -1,56 +1,104 @@
1 1 
 <template>
2 
-  <div class="context">
2 
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
3 3 
     <div class="ContextBox">
4 4 
       <div class="uploadimg">
5 
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png">
6 
-        <span>上传您认为最美的全家福照片</span>
5 
+        <img :src="img?yttjlove:yjslove">
6 
+        <span :class="desc?desc1:desc2">上传您认为最美的全家福照片</span>
7 7 
       </div>
8 8 
       <van-uploader :after-read="onRead">
9 
-        <img class="uploadimgbox" :src="uploadimg">
9 
+        <img class="uploadimgbox" :src="desc?uploadimg1:uploadimg2">
10 10 
       </van-uploader>
11 
-      <div class="WriteWord">
12 
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png">
13 
-        <span>寄语</span>
11 
+      <div class="WriteWord" v-if="writeword">
12 
+        <img :src="img?yttjpen:yjspen">
13 
+        <span :class="desc?desc1:desc2">寄语</span>
14 14 
       </div>
15 
-      <div class="input_content">
16 
-        <textarea id="textArea" @input="messageWrite" maxlength="200" v-model="postData.message" class="content_txt" ></textarea>
15 
+      <div class="input_content" v-if="writeword">
16 
+        <textarea
17 
+          id="textArea"
18 
+          @input="messageWrite"
19 
+          maxlength="200"
20 
+          v-model="postData.message"
21 
+          class="content_txt"
22 
+        ></textarea>
17 23 
         <span class="number">
18 24 
           <span id="textNum">{{messagenum}}</span>
19 
-          <span class="totalnum" >/200</span>
25 
+          <span class="totalnum">/200</span>
20 26 
         </span>
21 27 
       </div>
22 28 
       <div class="ContactInformation">
23 
-          <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png"/>
24 
-          <span>联系方式</span>
29 
+        <img :src="img?yttjphone:yjsphone">
30 
+        <span :class="desc?desc1:desc2">联系方式</span>
31 
+      </div>
32 
+      <div :class="desc?inputbox1:inputbox2">
33 
+        <input placeholder="输入手机号" v-model="postData.phone">
34 
+      </div>
35 
+
36 
+      <div :class="desc?inputbox1:inputbox2">
37 
+        <input placeholder="输入姓名" v-model="postData.name">
38 
+      </div>
39 
+      <div :class="desc?textareabox1:textareabox2" v-if="address">
40 
+        <textarea class="addressarea" placeholder="所在社区"></textarea>
25 41 
       </div>
26 
-      <input placeholder="输入手机号" v-model="postData.phone"/>
27 
-      <input placeholder="输入姓名" v-model="postData.name"/>
28 
-      <!-- <textarea class="addressarea" placeholder="所在社区" ></textarea> -->
29 42 
       <div class="btn">
30 
-          <button class="SubmitBtn" @click="SubmitBtn">提交</button>
43 
+        <button :class="desc?SubmitBtn1:SubmitBtn2" @click="SubmitBtn">提交</button>
31 44 
       </div>
32 45 
     </div>
33 46 
   </div>
34 47 
 </template>
35 48
36 49 
 <script>
37 
-import { createNamespacedHelpers } from 'vuex';
38 
-const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
50 
+import { createNamespacedHelpers } from "vuex";
51 
+import BgImg from "../../assets/bgimg.jpg";
52 
+import BgImage from "../../assets/yttjbg.png";
53 
+const {
54 
+  mapState: mapVoteState,
55 
+  mapActions: mapVoteActions
56 
+} = createNamespacedHelpers("vote");
39 57 
 export default {
40 
-  name: 'signup',
58 
+  name: "signup",
41 59 
   data() {
42 60 
     return {
61 
+      writeword: false,
62 
+      address: false,
63 
+      desc: true,
64 
+      desc1: "desc1",
65 
+      desc2: "desc2",
66 
+      inputbox1: "inputbox1",
67 
+      inputbox2: "inputbox2",
68 
+      textareabox1: "textareabox1",
69 
+      textareabox2: "textareabox2",
70 
+      SubmitBtn1: "SubmitBtn1",
71 
+      SubmitBtn2: "SubmitBtn2",
72 
+      coverImgUrl: true,
73 
+      BgImg,
74 
+      BgImage,
75 
+      img: true,
43 76 
       isLoading: false,
44 
-      uploadimg: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png',
77 
+      uploadimg1:
78 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png",
79 
+      uploadimg2:
80 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjsuploadimg.png",
81 
+      yttjlove:
82 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png",
83 
+      yttjpen:
84 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png",
85 
+      yttjphone:
86 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png",
87 
+      yjslove:
88 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/xin.png",
89 
+      yjspen:
90 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/xiegenjin.png",
91 
+      yjsphone:
92 
+        "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/dianhua.png",
45 93 
       messagenum: 0,
46 94 
       postData: {
47 
-        photo: '',
48 
-        phone: '',
49 
-        name: '',
50 
-        addr: '',
51 
-        message: '',
95 
+        photo: "",
96 
+        phone: "",
97 
+        name: "",
98 
+        addr: "",
99 
+        message: ""
52 100 
       },
53 
-      actid: '',
101 
+      actid: ""
54 102 
     };
55 103 
   },
56 104 
   computed: {
 
@@ -58,53 +106,68 @@ export default {
58 106 
       user: x => x.user
59 107 
     })
60 108 
   },
61 
-  created () {
62 
-    if(this.$route.params.actid != '') {
63 
-      this.actid = this.$route.params.actid
109 
+  created() {
110 
+    this.actid = this.$route.params.actid;
111 
+    if (this.actid == 1) {
112 
+      this.coverImgUrl = true;
113 
+      this.img = true;
114 
+      this.address = false;
115 
+      this.writeword = true;
116 
+      this.desc = true;
117 
+    } else if (this.actid == 2) {
118 
+      this.coverImgUrl = false;
119 
+      this.img = false;
120 
+      this.address = true;
121 
+      this.writeword = false;
122 
+      this.desc = false;
123 
+    }
124 
+    if (this.$route.params.actid != "") {
125 
+      this.actid = this.$route.params.actid;
64 126 
     } else {
65 
-      alert("不存在对应的活动信息！")
127 
+      alert("不存在对应的活动信息！");
66 128 
     }
67 129 
   },
68 130 
   methods: {
69 
-    ...mapVoteActions([
70 
-      'voteMember',
71 
-    ]),
72 
-    onRead (file) {
131 
+    ...mapVoteActions(["voteMember"]),
132 
+    onRead(file) {
73 133 
       console.log(file);
74 
-      let that = this
75 
-      this.isLoading = true
134 
+      let that = this;
135 
+      this.isLoading = true;
76 136 
       let reader = new FileReader();
77 137 
       reader.readAsDataURL(file.file);
78 
-      reader.onload = function (e) {
138 
+      reader.onload = function(e) {
79 139 
         let data = e.target.result;
80 140 
         //加载图片获取图片真实宽度和高度
81 141 
         let image = new Image();
82 142 
         image.src = data;
83 
-        image.onload = function () {
84 
-          that.toolClass.upload(file).then((res) => {
85 
-            that.uploadimg = res.result.url
86 
-            that.postData.photo = res.result.url
87 
-          }).catch(() => {
88 
-            that.isLoading = false
89 
-          })
143 
+        image.onload = function() {
144 
+          that.toolClass
145 
+            .upload(file)
146 
+            .then(res => {
147 
+              that.uploadimg = res.result.url;
148 
+              that.postData.photo = res.result.url;
149 
+            })
150 
+            .catch(() => {
151 
+              that.isLoading = false;
152 
+            });
90 153 
         };
91 154 
       };
92 155 
     },
93 
-    messageWrite () {
94 
-      this.messagenum = this.postData.message.length
156 
+    messageWrite() {
157 
+      this.messagenum = this.postData.message.length;
95 158 
     },
96 
-    SubmitBtn () {
159 
+    SubmitBtn() {
97 160 
       this.voteMember({
98 161 
         actid: this.actid,
99 162 
         openid: this.user,
100 
-        ...this.postData,
101 
-      }).then((res) => {
163 
+        ...this.postData
164 
+      }).then(res => {
102 165 
         this.$router.push({
103 166 
           path: `/detail/${this.actid}/${res.MemberId}`
104 
-        })
105 
-      })
106 
-    },
107 
-  },
167 
+        });
168 
+      });
169 
+    }
170 
+  }
108 171 
 };
109 172 
 </script>
110 173 
 
@@ -112,7 +175,7 @@ export default {
112 175 
 .context {
113 176 
   width: 100%;
114 177 
   height: 100%;
115 
-  background-color: rgba(209,220,228,1);
178 
+  // background-color: rgba(209, 220, 228, 1);
116 179 
   display: flex;
117 180 
   justify-content: center;
118 181 
 
@@ -122,6 +185,7 @@ export default {
122 185 
     border-radius: 0.06rem;
123 186 
     background-color: rgba(255, 255, 255, 1);
124 187 
     margin-top: 0.12rem;
188 
+    position: relative;
125 189
126 190 
     .uploadimg {
127 191 
       display: flex;
 
@@ -133,11 +197,19 @@ export default {
133 197 
         height: 0.2rem;
134 198 
       }
135 199
136 
-      span {
200 
+      .desc1 {
137 201 
         font-size: 0.16rem;
138 202 
         font-family: PingFangSC-Medium;
139 
-        font-weight: bold;
140 
-        color:rgba(112,125,138,1);
203 
+        font-weight: bolder;
204 
+        color: rgba(112, 125, 138, 1);
205 
+        line-height: 0.22rem;
206 
+        padding-left: 0.03rem;
207 
+      }
208 
+      .desc2 {
209 
+        font-size: 0.16rem;
210 
+        font-family: PingFangSC-Medium;
211 
+        font-weight: bolder;
212 
+        color: rgba(112, 84, 75, 1);
141 213 
         line-height: 0.22rem;
142 214 
         padding-left: 0.03rem;
143 215 
       }
 
@@ -158,11 +230,19 @@ export default {
158 230 
         width: 0.22rem;
159 231 
         height: 0.2rem;
160 232 
       }
161 
-      span {
233 
+      .desc1 {
162 234 
         font-size: 0.16rem;
163 235 
         font-family: PingFangSC-Medium;
164 
-        font-weight: bold;
165 
-        color:rgba(112,125,138,1);
236 
+        font-weight: bolder;
237 
+        color: rgba(112, 125, 138, 1);
238 
+        line-height: 0.22rem;
239 
+        padding-left: 0.03rem;
240 
+      }
241 
+      .desc2 {
242 
+        font-size: 0.16rem;
243 
+        font-family: PingFangSC-Medium;
244 
+        font-weight: bolder;
245 
+        color: rgba(112, 84, 75, 1);
166 246 
         line-height: 0.22rem;
167 247 
         padding-left: 0.03rem;
168 248 
       }
 
@@ -180,109 +260,188 @@ export default {
180 260 
         margin-left: 5%;
181 261 
         border: none;
182 262 
         font-size: 0.16rem;
183 
-        font-weight: 400;
184 
-        background:rgba(220,229,236,0.63);
263 
+        font-weight: bold;
264 
+        background: rgba(220, 229, 236, 0.63);
185 265 
         line-height: 0.22rem;
186 266 
         border-radius: 0.06rem;
187 
-        font-weight:bold;
188 
-color:rgba(112,125,138,1);
267 
+        font-weight: bold;
268 
+        color: rgba(112, 125, 138, 1);
189 269 
       }
190 270 
       .number {
191 271 
         position: absolute;
192 272 
         bottom: 0;
193 273 
         right: -0.1rem;
194 274
195 
-        #textNum{
196 
-color:#707D8A;
197 
-font-size:0.14rem;
198 
-font-family:PingFangSC-Medium;
199 
-font-weight:bold;
200 
-line-height:0.2rem;
275 
+        #textNum {
276 
+          color: #707d8a;
277 
+          font-size: 0.14rem;
278 
+          font-family: PingFangSC-Medium;
279 
+          font-weight: bolder;
280 
+          line-height: 0.2rem;
201 281 
         }
202 282
203 
-        .totalnum{
204 
-color:#B8C2CB;
205 
-font-size:0.14rem;
206 
-font-family:PingFangSC-Medium;
207 
-font-weight:bold;
208 
-line-height:0.2rem;
283 
+        .totalnum {
284 
+          color: #b8c2cb;
285 
+          font-size: 0.14rem;
286 
+          font-family: PingFangSC-Medium;
287 
+          font-weight: bolder;
288 
+          line-height: 0.2rem;
209 289 
         }
210 290 
       }
211 291 
     }
212 292
213 
-    .ContactInformation{
214 
-        display: flex;
293 
+    .ContactInformation {
294 
+      display: flex;
215 295 
       flex-direction: row;
216 296 
       padding: 0.15rem 0 0.08rem 0.1rem;
217 297
218 
-      img{
219 
-          width: 0.22rem;
298 
+      img {
299 
+        width: 0.22rem;
220 300 
         height: 0.2rem;
221 301 
       }
222 
-      span{
223 
-          font-size: 0.16rem;
302 
+      .desc1 {
303 
+        font-size: 0.16rem;
224 304 
         font-family: PingFangSC-Medium;
225 
-        font-weight: bold;
226 
-        color:rgba(112,125,138,1);
305 
+        font-weight: bolder;
306 
+        color: rgba(112, 125, 138, 1);
307 
+        line-height: 0.22rem;
308 
+        padding-left: 0.03rem;
309 
+      }
310 
+      .desc2 {
311 
+        font-size: 0.16rem;
312 
+        font-family: PingFangSC-Medium;
313 
+        font-weight: bolder;
314 
+        color: rgba(112, 84, 75, 1);
227 315 
         line-height: 0.22rem;
228 316 
         padding-left: 0.03rem;
229 317 
       }
230 318 
     }
231 
-    input{
232 
-        width: 84%;
233 
-        height: 0.4rem;
234 
-        background-color:rgba(220,229,236,0.63);
235 
-border-radius:0.06rem;
236 
-padding: 0.02rem 0.1rem;
237 
-    margin: 0 0 2% 5%;
238 
-    }
239 319
240 
-    input::-webkit-input-placeholder {
241 
-     font-size:0.16rem;
242 
-font-family:PingFangSC-Medium;
243 
-font-weight:bold;
244 
-color:rgba(117,132,146,1);
245 
-line-height:0.22rem;
320 
+    .inputbox1 {
321 
+      width: 84%;
322 
+      height: 0.4rem;
323 
+      background-color: rgba(220, 229, 236, 0.63);
324 
+      margin-left: calc(8%);
325 
+      margin-bottom: 0.08rem;
326 
+      border-radius: 0.06rem;
327 
+      input {
328 
+        width: 100%;
329 
+        height: 100%;
330 
+        background-color: rgba(255, 255, 255, 0);
331 
+        text-indent: 0.12rem;
332 
+      }
333 
+
334 
+      input::-webkit-input-placeholder {
335 
+        font-size: 0.16rem;
336 
+        font-family: PingFangSC-Medium;
337 
+        font-weight: bolder;
338 
+        color: rgba(117, 132, 146, 0.4);
339 
+        line-height: 0.22rem;
340 
+      }
246 341 
     }
247 342
248 
-    .addressarea{
249 
-         width: 84%;
250 
-        height: 0.8rem;
251 
-        background-color:rgba(220,229,236,0.63);
252 
-border-radius:0.06rem;
253 
-padding: 0.02rem 0.1rem;
254 
-    margin: 0 0 2% 5%;
343 
+    .inputbox2 {
344 
+      width: 84%;
345 
+      height: 0.4rem;
346 
+      background-color: rgba(232, 224, 220, 1);
347 
+      margin-left: calc(8%);
348 
+      margin-bottom: 0.08rem;
349 
+      border-radius: 0.06rem;
350 
+      input {
351 
+        width: 100%;
352 
+        height: 100%;
353 
+        background-color: rgba(255, 255, 255, 0);
354 
+        text-indent: 0.12rem;
355 
+      }
356 
+
357 
+      input::-webkit-input-placeholder {
358 
+        font-size: 0.16rem;
359 
+        font-family: PingFangSC-Medium;
360 
+        font-weight: bolder;
361 
+        color: rgba(139, 116, 102, 0.4);
362 
+        line-height: 0.22rem;
363 
+      }
255 364 
     }
256 
-     textarea::-webkit-input-placeholder {
257 
-     font-size:0.16rem;
258 
-font-family:PingFangSC-Medium;
259 
-font-weight:bold;
260 
-color:rgba(112,125,138,1);
261 
-line-height:0.22rem;
365 
+    .textareabox1 {
366 
+      width: 84%;
367 
+      height: 0.8rem;
368 
+      background-color: rgba(220, 229, 236, 0.63);
369 
+      border-radius: 0.06rem;
370 
+      margin-left: calc(8%);
371 
+      .addressarea {
372 
+        width: 100%;
373 
+        height: 100%;
374 
+        margin-top: 0.08rem;
375 
+        background-color: rgba(255, 255, 255, 0);
376 
+        text-indent: 0.12rem;
377 
+      }
378 
+      textarea::-webkit-input-placeholder {
379 
+        font-size: 0.16rem;
380 
+        font-family: PingFangSC-Medium;
381 
+        font-weight: bolder;
382 
+        color: rgba(112, 125, 138, 0.4);
383 
+        line-height: 0.22rem;
384 
+      }
262 385 
     }
263 
-.btn{
264 
-    width: 100%;
265 
-    display: flex;
266 
-    align-items: center;
267 
-    justify-content: center;
268 
-    margin-top: 0.2rem;
269 386
270 
-       .SubmitBtn{
271 
-        width: 44%;
272 
-    height: 0.5rem;
273 
-    border-radius: 0.23rem;
274 
-   background:rgba(166,184,201,1);
275 
-box-shadow:0px 2px 10px 0px rgba(207,217,227,1);
276 
-    border: none;
277 
-    font-size: 0.2rem;
278 
-    font-family: PingFangSC-Medium;
279 
-    font-weight: bold;
280 
-    color: rgba(255, 255, 255, 1);
281 
-    line-height: 0.28rem;
387 
+    .textareabox2 {
388 
+      width: 84%;
389 
+      height: 0.8rem;
390 
+      background-color: rgba(232, 224, 220, 1);
391 
+      border-radius: 0.06rem;
392 
+      margin-left: calc(8%);
393 
+      .addressarea {
394 
+        width: 100%;
395 
+        height: 100%;
396 
+        margin-top: 0.08rem;
397 
+        background-color: rgba(255, 255, 255, 0);
398 
+        text-indent: 0.12rem;
399 
+      }
400 
+      textarea::-webkit-input-placeholder {
401 
+        font-size: 0.16rem;
402 
+        font-family: PingFangSC-Medium;
403 
+        font-weight: bolder;
404 
+        color: rgba(139, 116, 102, 0.4);
405 
+        line-height: 0.22rem;
406 
+      }
282 407 
     }
283 408
284 
-}
285 
-
409 
+    .btn {
410 
+      width: 100%;
411 
+      display: flex;
412 
+      align-items: center;
413 
+      justify-content: center;
414 
+      position: absolute;
415 
+      left: 0;
416 
+      bottom: 0.32rem;
417 
+
418 
+      .SubmitBtn1 {
419 
+        width: 44%;
420 
+        height: 0.5rem;
421 
+        border-radius: 0.23rem;
422 
+        background: rgba(166, 184, 201, 1);
423 
+        box-shadow: 0px 2px 10px 0px rgba(207, 217, 227, 1);
424 
+        border: none;
425 
+        font-size: 0.2rem;
426 
+        font-family: PingFangSC-Medium;
427 
+        font-weight: bolder;
428 
+        color: rgba(255, 255, 255, 1);
429 
+        line-height: 0.28rem;
430 
+      }
431 
+      .SubmitBtn2 {
432 
+        width: 44%;
433 
+        height: 0.5rem;
434 
+        border-radius: 0.23rem;
435 
+        background: rgba(173, 145, 129, 1);
436 
+        box-shadow: 0px 2px 10px 0px rgba(120, 108, 101, 0.46);
437 
+        border: none;
438 
+        font-size: 0.2rem;
439 
+        font-family: PingFangSC-Medium;
440 
+        font-weight: bolder;
441 
+        color: rgba(255, 255, 255, 1);
442 
+        line-height: 0.28rem;
443 
+      }
444 
+    }
286 445 
   }
287 446 
 }
288 447 
 </style>