陈冉 6 年之前
父節點
當前提交
fde1dace8c
共有 9 個檔案被更改,包括 500 行新增111 行删除
  1. 二進制
      src/assets/bgimage.jpg
  2. 3
    0
      src/assets/css/theme.scss
  3. 二進制
      src/assets/icon/yjsuoloadimg.png
  4. 二進制
      src/assets/yttjbg.png
  5. 23
    5
      src/components/music.vue
  6. 85
    19
      src/views/vote/detail.vue
  7. 45
    6
      src/views/vote/index.vue
  8. 172
    50
      src/views/vote/list.vue
  9. 172
    31
      src/views/vote/signup.vue

二進制
src/assets/bgimage.jpg 查看文件


+ 3
- 0
src/assets/css/theme.scss 查看文件

5
 /*按钮颜色*/
5
 /*按钮颜色*/
6
 $btn_fastener:rgba(166,184,201,1);
6
 $btn_fastener:rgba(166,184,201,1);
7
 $input_box:rgba(201,214,224,1);
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/yjsuoloadimg.png 查看文件


二進制
src/assets/yttjbg.png 查看文件


+ 23
- 5
src/components/music.vue 查看文件

2
     <div class="musicbox">
2
     <div class="musicbox">
3
       <!-- 播放 -->
3
       <!-- 播放 -->
4
       <div class="play" v-if="audioPlayShow" @click="audioState">
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="img?yttjmusicopen:yjsmusicopen">
6
+        <!-- <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png"> -->
7
       </div>
7
       </div>
8
       <!-- 暂停-->
8
       <!-- 暂停-->
9
       <div class="play" v-else @click="audioState">
9
       <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" > -->
10
+        <img  :src="img?yttjmusicoff:yttjmusicoff" >
11
+         <!-- <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" > -->
12
       </div>
12
       </div>
13
       <audio ref="player" :src="url" autoplay preload loop="loop"></audio>
13
       <audio ref="player" :src="url" autoplay preload loop="loop"></audio>
14
     </div>
14
     </div>
15
 </template>
15
 </template>
16
 <script>
16
 <script>
17
+// import { createNamespacedHelpers } from 'vuex'
18
+// const {
19
+//   mapState: mapactivityState,
20
+// } = createNamespacedHelpers("vote");
17
 export default {
21
 export default {
18
   name:'music',
22
   name:'music',
19
   props:['url'],
23
   props:['url'],
20
   data() {
24
   data() {
21
     return {
25
     return {
26
+      img:true,
27
+      yttjmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png',
28
+      yjsmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png',
29
+      yttjmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png',
30
+      yjsmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_close.png',
22
       audioPlayShow: true,
31
       audioPlayShow: true,
32
+      actid: this.$route.query.actid
23
     };
33
     };
24
   },
34
   },
25
   methods: {
35
   methods: {
38
 </script>
48
 </script>
39
 
49
 
40
 <style lang="scss" scoped>
50
 <style lang="scss" scoped>
51
+// @keyframes changDeg{
52
+// 			0%{
53
+// 				transform: rotate(0deg);
54
+// 			}
55
+// 			100%{
56
+// 				transform: rotate(360deg);
57
+// 			}
58
+// 		}
41
   .musicbox {
59
   .musicbox {
42
     position: fixed;
60
     position: fixed;
43
-    top: 1.27rem;
61
+    top: 0.09rem;
44
     right: 0.09rem;
62
     right: 0.09rem;
45
     width: 0.24rem;
63
     width: 0.24rem;
46
     height: 0.24rem;
64
     height: 0.24rem;

+ 85
- 19
src/views/vote/detail.vue 查看文件

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

+ 45
- 6
src/views/vote/index.vue 查看文件

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

+ 172
- 50
src/views/vote/list.vue 查看文件

1
 <template>
1
 <template>
2
-  <div class="context">
2
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
3
     <img class="BannerImage" :src="activity.Banner">
3
     <img class="BannerImage" :src="activity.Banner">
4
     <div :class="isOK?searchs:searchb">
4
     <div :class="isOK?searchs:searchb">
5
       <input placeholder="输入编号或姓名" v-model="q">
5
       <input placeholder="输入编号或姓名" v-model="q">
15
             <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
15
             <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
16
               <div class="LatestUpload">
16
               <div class="LatestUpload">
17
                 <div class="LatestUploadList" v-for="(item,index) in newList" :key="index">
17
                 <div class="LatestUploadList" v-for="(item,index) in newList" :key="index">
18
-                  <div class="ActivePersonnelBox" @click="gotovotingdetails(item.MemberId)">
18
+                  <div :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2" @click="gotovotingdetails(item.MemberId)">
19
                     <img :src="item.Photo">
19
                     <img :src="item.Photo">
20
                   </div>
20
                   </div>
21
-                  <span class="ballot">NO.{{item.MemberId}}</span>
21
+                  <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
22
                   <span class="ActivePersonnelName">{{item.Name}}</span>
22
                   <span class="ActivePersonnelName">{{item.Name}}</span>
23
-                  <button class="VoteBtn" @click="Vote(item.MemberId)">投TA一票</button>
23
+                  <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
24
                   <div class="VoteNumber">
24
                   <div class="VoteNumber">
25
                     <span>已获投票数:</span>
25
                     <span>已获投票数:</span>
26
                     <p>{{item.Vote}}票</p>
26
                     <p>{{item.Vote}}票</p>
32
           <van-tab title="TOP50">
32
           <van-tab title="TOP50">
33
             <div class="LatestUpload">
33
             <div class="LatestUpload">
34
               <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
34
               <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
35
-                <div class="ActivePersonnelBox" @click="gotovotingdetails(item.MemberId)">
35
+                <div :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2" @click="gotovotingdetails(item.MemberId)">
36
                   <img :src="item.Photo">
36
                   <img :src="item.Photo">
37
                 </div>
37
                 </div>
38
-                <span class="ballot">NO.{{item.MemberId}}</span>
38
+                <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
39
                 <span class="ActivePersonnelName">{{item.Name}}</span>
39
                 <span class="ActivePersonnelName">{{item.Name}}</span>
40
-                <button class="VoteBtn" @click="Vote(item.MemberId)">投TA一票</button>
40
+                <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
41
                 <div class="VoteNumber">
41
                 <div class="VoteNumber">
42
                   <span>已获投票数:</span>
42
                   <span>已获投票数:</span>
43
                   <p>{{item.Vote}}票</p>
43
                   <p>{{item.Vote}}票</p>
48
         </van-tabs>
48
         </van-tabs>
49
       </div>
49
       </div>
50
     </div>
50
     </div>
51
-    <button class="signupBtn" @click="signup">我要报名</button>
51
+    <button :class="signupBtn?'signupBtnOne':'signupBtnTwo'" @click="signup">我要报名</button>
52
     <toast v-if="show" :url="activity.AfterVote" @close="close" @confirmbtn="tolink"></toast>
52
     <toast v-if="show" :url="activity.AfterVote" @close="close" @confirmbtn="tolink"></toast>
53
   </div>
53
   </div>
54
 </template>
54
 </template>
55
 
55
 
56
 <script>
56
 <script>
57
+import BgImg from "../../assets/bgimg.jpg";
58
+import BgImage from "../../assets/yttjbg.png";
57
 import { createNamespacedHelpers } from "vuex";
59
 import { createNamespacedHelpers } from "vuex";
58
 import toast from "../../components/toast.vue";
60
 import toast from "../../components/toast.vue";
59
 
61
 
67
   data() {
69
   data() {
68
     return {
70
     return {
69
       // AudioPlay: ''
71
       // AudioPlay: ''
70
-      isOK:true,
71
-      searchs:'searchs',
72
-      searchb:'searchb',
72
+      signupBtn:true,
73
+      signupBtnOne:"signupBtnOne",
74
+      signupBtnTwo:"signupBtnTwo",
75
+      VoteBtn1:'VoteBtn1',
76
+      VoteBtn2:'VoteBtn2',
77
+      ballot1:'ballot1',
78
+      ballot2:'ballot2',
79
+      coverImgUrl: true,
80
+      isOK: true,
81
+      searchs: "searchs",
82
+      searchb: "searchb",
83
+      ActivePersonnelBox1:'ActivePersonnelBox1',
84
+      ActivePersonnelBox2:'ActivePersonnelBox2',
85
+      BgImg,
86
+      BgImage,
73
       IconSearch:
87
       IconSearch:
74
         "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png",
88
         "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png",
75
       tab: "",
89
       tab: "",
99
   },
113
   },
100
   created() {
114
   created() {
101
     this.actid = this.$route.params.actid;
115
     this.actid = this.$route.params.actid;
116
+    console.log(this.actid);
117
+    if (this.actid == 1) {
118
+      this.coverImgUrl = true;
119
+      this.signupBtn =true;
120
+      this.isOK = true;
121
+    } else if (this.actid == 2) {
122
+      this.coverImgUrl = false;
123
+      this.signupBtn=false;
124
+      this.isOK = false;
125
+    }
102
     this.getActivity({
126
     this.getActivity({
103
       actid: this.actid
127
       actid: this.actid
104
     });
128
     });
106
     this.toplist();
130
     this.toplist();
107
   },
131
   },
108
   methods: {
132
   methods: {
109
-    handleScroll() {
110
-      // 页面滚动距顶部距离
111
-      var scrollTop =
112
-        window.pageYOffset ||
113
-        document.documentElement.scrollTop ||
114
-        document.body.scrollTop;
115
-         window.console.log(scrollTop);
116
-         if(scrollTop>=280){
117
-          this.isOK =false;
118
-        }else {
119
-          this.isOK=true;
120
-        }
121
-
122
-      var scroll = scrollTop - this.i;
123
-      this.i = scrollTop;
124
-     
125
-      // if (scroll < 0) {
126
-      //   this.isFixed =false;
127
-      //   console.log("up");
128
-      // } else {
129
-      //    if(this.i>=280){
130
-      //     this.isFixed =true;
131
-      //   }
132
-      //   console.log("down");
133
-      // }
134
-    },
133
+    // handleScroll() {
134
+    //   // 页面滚动距顶部距离
135
+    //   var scrollTop =
136
+    //     window.pageYOffset ||
137
+    //     document.documentElement.scrollTop ||
138
+    //     document.body.scrollTop;
139
+    //   if (scrollTop >= 280) {
140
+    //     this.isOK = false;
141
+    //   } else {
142
+    //     this.isOK = true;
143
+    //   }
144
+    // },
135
 
145
 
136
     ...mapactivityActions(["getList", "getTopList", "getActivity", "vote"]),
146
     ...mapactivityActions(["getList", "getTopList", "getActivity", "vote"]),
137
     newlist() {
147
     newlist() {
263
     width: 100%;
273
     width: 100%;
264
     height: 3.4rem;
274
     height: 3.4rem;
265
   }
275
   }
266
-.searchb{
267
-  width: 93%;
276
+  .searchb {
277
+    width: 93%;
278
+    height: 0.44rem;
279
+    background-color: rgba(118,89,81,1);
280
+    border-radius: 0.22rem;
281
+    border: 0.01rem solid rgba(255, 255, 255, 1);
282
+    display: flex;
283
+    flex-direction: row;
284
+    justify-content: space-between;
285
+    align-items: center;
286
+    position: absolute;
287
+    top: 2.8rem;
288
+    left: calc(3.1%);
289
+
290
+    input {
291
+      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
292
+      background-color: rgba(255, 255, 255, 0);
293
+      color: rgba(255, 255, 255, 1);
294
+      font-size: 0.16rem;
295
+      font-family: PingFangSC-Regular;
296
+      font-weight: 400;
297
+      line-height: 0.22rem;
298
+      width: 5rem;
299
+      text-indent: 0.1rem;
300
+    }
301
+    input::-webkit-input-placeholder {
302
+      color: rgba(255, 255, 255, 1);
303
+      font-size: 0.16rem;
304
+      font-family: PingFangSC-Regular;
305
+      font-weight: 400;
306
+      line-height: 0.22rem;
307
+    }
308
+    .IconSearch {
309
+      width: 0.2rem;
310
+      height: 0.2rem;
311
+      margin-right: 0.1rem;
312
+    }
313
+  }
314
+  .searchs {
315
+    width: 93%;
268
     height: 0.44rem;
316
     height: 0.44rem;
269
     background-color: rgba(201, 214, 224, 1);
317
     background-color: rgba(201, 214, 224, 1);
270
-    border-radius: 6px;
318
+    border-radius: 0.06rem;
271
     border: 0.01rem solid rgba(255, 255, 255, 1);
319
     border: 0.01rem solid rgba(255, 255, 255, 1);
272
     display: flex;
320
     display: flex;
273
     flex-direction: row;
321
     flex-direction: row;
274
     justify-content: space-between;
322
     justify-content: space-between;
275
     align-items: center;
323
     align-items: center;
276
-    position: fixed;
277
-    top: 0;
324
+    position: absolute;
325
+    top: 2.8rem;
278
     left: calc(3.1%);
326
     left: calc(3.1%);
279
 
327
 
280
     input {
328
     input {
295
       font-weight: 400;
343
       font-weight: 400;
296
       line-height: 0.22rem;
344
       line-height: 0.22rem;
297
     }
345
     }
346
+
298
     .IconSearch {
347
     .IconSearch {
299
       width: 0.2rem;
348
       width: 0.2rem;
300
       height: 0.2rem;
349
       height: 0.2rem;
301
       margin-right: 0.1rem;
350
       margin-right: 0.1rem;
302
     }
351
     }
352
+  }
303
 
353
 
304
-}
305
-  .searchs {
354
+  #searchone{
355
+
356
+    .searchs {
306
     width: 93%;
357
     width: 93%;
307
     height: 0.44rem;
358
     height: 0.44rem;
308
     background-color: rgba(201, 214, 224, 1);
359
     background-color: rgba(201, 214, 224, 1);
341
       margin-right: 0.1rem;
392
       margin-right: 0.1rem;
342
     }
393
     }
343
   }
394
   }
395
+
396
+  }
344
   .informationimg {
397
   .informationimg {
345
     width: 97%;
398
     width: 97%;
346
     height: 6.24rem;
399
     height: 6.24rem;
360
     display: flex;
413
     display: flex;
361
     flex-direction: column;
414
     flex-direction: column;
362
     align-items: center;
415
     align-items: center;
363
-    margin-bottom: 0.19rem;
416
+    margin-bottom: 1rem;
364
 
417
 
365
     .VoteList {
418
     .VoteList {
366
       margin: 0.26rem 0;
419
       margin: 0.26rem 0;
386
           align-items: center;
439
           align-items: center;
387
           position: relative;
440
           position: relative;
388
 
441
 
389
-          .ActivePersonnelBox {
442
+          .ActivePersonnelBox1 {
390
             width: 90%;
443
             width: 90%;
391
             height: 1.83rem;
444
             height: 1.83rem;
392
             border-radius: 0.15rem;
445
             border-radius: 0.15rem;
399
               border-radius: 0.1rem;
452
               border-radius: 0.1rem;
400
             }
453
             }
401
           }
454
           }
402
-          .ballot {
455
+ .ActivePersonnelBox2 {
456
+            width: 90%;
457
+            height: 1.83rem;
458
+            border-radius: 0.15rem;
459
+            margin-bottom: 0.11rem;
460
+            border: 0.04rem solid rgba(126,100,86,1);
461
+
462
+            img {
463
+              width: 100%;
464
+              height: 100%;
465
+              border-radius: 0.1rem;
466
+            }
467
+          }
468
+
469
+          .ballot1 {
403
             position: absolute;
470
             position: absolute;
404
             top: 0;
471
             top: 0;
405
             background: rgba(166, 184, 201, 1);
472
             background: rgba(166, 184, 201, 1);
411
             color: rgba(255, 255, 255, 1);
478
             color: rgba(255, 255, 255, 1);
412
             line-height: 0.2rem;
479
             line-height: 0.2rem;
413
           }
480
           }
481
+          .ballot2 {
482
+            position: absolute;
483
+            top: 0;
484
+            background: rgba(126,100,86,1);
485
+            border-radius: 0 0 0.08rem 0.08rem;
486
+            padding: 0.02rem 0.12rem;
487
+            font-size: 0.14rem;
488
+            font-family: PingFangSC-Medium;
489
+            font-weight: bold;
490
+            color: rgba(255, 255, 255, 1);
491
+            line-height: 0.2rem;
492
+          }
414
 
493
 
415
           .ActivePersonnelName {
494
           .ActivePersonnelName {
416
             font-size: 0.16rem;
495
             font-size: 0.16rem;
421
             padding-bottom: 0.11rem;
500
             padding-bottom: 0.11rem;
422
           }
501
           }
423
 
502
 
424
-          .VoteBtn {
503
+          .VoteBtn1 {
425
             width: 56%;
504
             width: 56%;
426
             height: 0.23rem;
505
             height: 0.23rem;
427
             border-radius: 0.25rem;
506
             border-radius: 0.25rem;
434
             line-height: 0.2rem;
513
             line-height: 0.2rem;
435
             margin-bottom: 0.14rem;
514
             margin-bottom: 0.14rem;
436
           }
515
           }
516
+          .VoteBtn2{
517
+            width: 56%;
518
+            height: 0.23rem;
519
+            border-radius: 0.25rem;
520
+            background-color: rgba(126,100,86,1);
521
+            border: none;
522
+            font-size: 0.14rem;
523
+            font-family: PingFangSC-Medium;
524
+            font-weight: bold;
525
+            color: rgba(255, 255, 255, 1);
526
+            line-height: 0.2rem;
527
+            margin-bottom: 0.14rem;
528
+          }
437
 
529
 
438
           .VoteNumber {
530
           .VoteNumber {
439
             display: flex;
531
             display: flex;
458
       }
550
       }
459
     }
551
     }
460
   }
552
   }
461
-  .signupBtn {
462
-    width: 91%;
553
+  .signupBtnOne{
554
+     width: 91%;
463
     height: 0.5rem;
555
     height: 0.5rem;
464
     border-radius: 0.25rem;
556
     border-radius: 0.25rem;
465
     background: rgba(166, 184, 201, 1);
557
     background: rgba(166, 184, 201, 1);
473
     bottom: 0.19rem;
565
     bottom: 0.19rem;
474
     left: calc(4.25%);
566
     left: calc(4.25%);
475
   }
567
   }
568
+  .signupBtnTwo{
569
+     width: 91%;
570
+    height: 0.5rem;
571
+    border-radius: 0.25rem;
572
+    background: rgba(173,145,129,1);
573
+    border: none;
574
+    font-size: 0.2rem;
575
+    font-family: PingFangSC-Medium;
576
+    font-weight: bold;
577
+    color: rgba(255, 255, 255, 1);
578
+    line-height: 0.28rem;
579
+    position: fixed;
580
+    bottom: 0.19rem;
581
+    left: calc(4.25%);
582
+  }
583
+  // .signupBtn {
584
+  //   width: 91%;
585
+  //   height: 0.5rem;
586
+  //   border-radius: 0.25rem;
587
+  //   background: rgba(166, 184, 201, 1);
588
+  //   border: none;
589
+  //   font-size: 0.2rem;
590
+  //   font-family: PingFangSC-Medium;
591
+  //   font-weight: bold;
592
+  //   color: rgba(255, 255, 255, 1);
593
+  //   line-height: 0.28rem;
594
+  //   position: fixed;
595
+  //   bottom: 0.19rem;
596
+  //   left: calc(4.25%);
597
+  // }
476
 }
598
 }
477
 </style>
599
 </style>
478
 
600
 

+ 172
- 31
src/views/vote/signup.vue 查看文件

1
 <template>
1
 <template>
2
-  <div class="context">
2
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
3
     <div class="ContextBox">
3
     <div class="ContextBox">
4
       <div class="uploadimg">
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
       </div>
7
       </div>
8
       <van-uploader :after-read="onRead">
8
       <van-uploader :after-read="onRead">
9
-        <img class="uploadimgbox" :src="uploadimg">
9
+        <img class="uploadimgbox" :src="desc?uploadimg1:uploadimg2">
10
       </van-uploader>
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
       </div>
14
       </div>
15
-      <div class="input_content">
15
+      <div class="input_content" v-if="writeword">
16
         <textarea id="textArea" @input="messageWrite" maxlength="200" v-model="postData.message" class="content_txt" ></textarea>
16
         <textarea id="textArea" @input="messageWrite" maxlength="200" v-model="postData.message" class="content_txt" ></textarea>
17
         <span class="number">
17
         <span class="number">
18
           <span id="textNum">{{messagenum}}</span>
18
           <span id="textNum">{{messagenum}}</span>
20
         </span>
20
         </span>
21
       </div>
21
       </div>
22
       <div class="ContactInformation">
22
       <div class="ContactInformation">
23
-          <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png"/>
24
-          <span>联系方式</span>
23
+          <img :src="img?yttjphone:yjsphone"/>
24
+          <span :class="desc?desc1:desc2">联系方式</span>
25
+      </div>
26
+      <div :class="desc?inputbox1:inputbox2">
27
+        <input placeholder="输入手机号" v-model="postData.phone"/>
28
+      </div>
29
+      
30
+      <div :class="desc?inputbox1:inputbox2">
31
+        <input placeholder="输入姓名" v-model="postData.name"/>
32
+      </div>  
33
+      <div :class="desc?textareabox1:textareabox2" v-if="address">
34
+      <textarea class="addressarea" placeholder="所在社区" ></textarea>
25
       </div>
35
       </div>
26
-      <input placeholder="输入手机号" v-model="postData.phone"/>
27
-      <input placeholder="输入姓名" v-model="postData.name"/>
28
-      <!-- <textarea class="addressarea" placeholder="所在社区" ></textarea> -->
29
       <div class="btn">
36
       <div class="btn">
30
-          <button class="SubmitBtn" @click="SubmitBtn">提交</button>
37
+          <button :class="desc?SubmitBtn1:SubmitBtn2" @click="SubmitBtn">提交</button>
31
       </div>
38
       </div>
32
     </div>
39
     </div>
33
   </div>
40
   </div>
35
 
42
 
36
 <script>
43
 <script>
37
 import { createNamespacedHelpers } from 'vuex';
44
 import { createNamespacedHelpers } from 'vuex';
45
+import BgImg from "../../assets/bgimg.jpg";
46
+import BgImage from "../../assets/yttjbg.png";
38
 const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
47
 const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
39
 export default {
48
 export default {
40
   name: 'signup',
49
   name: 'signup',
41
   data() {
50
   data() {
42
     return {
51
     return {
52
+      writeword:false,
53
+      address:false,
54
+      desc:true,
55
+      desc1:'desc1',
56
+      desc2:'desc2',
57
+      inputbox1:'inputbox1',
58
+      inputbox2:'inputbox2',
59
+      textareabox1:'textareabox1',
60
+      textareabox2:'textareabox2',
61
+      SubmitBtn1:'SubmitBtn1',
62
+      SubmitBtn2:'SubmitBtn2',
63
+      coverImgUrl: true,
64
+      BgImg,
65
+      BgImage,
66
+      img:true,
43
       isLoading: false,
67
       isLoading: false,
44
-      uploadimg: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png',
68
+      uploadimg1: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png',
69
+      uploadimg2: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjsuploadimg.png',
70
+      yttjlove:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png',
71
+      yttjpen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png',
72
+      yttjphone:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png',
73
+      yjslove:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_love.png',
74
+      yjspen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_pen.png',
75
+      yjsphone:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_phone.png',
45
       messagenum: 0,
76
       messagenum: 0,
46
       postData: {
77
       postData: {
47
         photo: '',
78
         photo: '',
59
     })
90
     })
60
   },
91
   },
61
   created () {
92
   created () {
93
+    this.actid = this.$route.params.actid
94
+    if(this.actid==1){
95
+      this.coverImgUrl = true;
96
+      this.img=true;
97
+      this.address=false;
98
+      this.writeword=true;
99
+      this.desc=true;
100
+    }else if(this.actid==2){
101
+      this.coverImgUrl = false;
102
+      this.img=false;
103
+      this.address=true;
104
+      this.writeword=false;
105
+      this.desc=false;
106
+    }
62
     if(this.$route.params.actid != '') {
107
     if(this.$route.params.actid != '') {
63
       this.actid = this.$route.params.actid
108
       this.actid = this.$route.params.actid
64
     } else {
109
     } else {
133
         height: 0.2rem;
178
         height: 0.2rem;
134
       }
179
       }
135
 
180
 
136
-      span {
181
+      .desc1 {
137
         font-size: 0.16rem;
182
         font-size: 0.16rem;
138
         font-family: PingFangSC-Medium;
183
         font-family: PingFangSC-Medium;
139
         font-weight: bold;
184
         font-weight: bold;
141
         line-height: 0.22rem;
186
         line-height: 0.22rem;
142
         padding-left: 0.03rem;
187
         padding-left: 0.03rem;
143
       }
188
       }
189
+      .desc2 {
190
+        font-size: 0.16rem;
191
+        font-family: PingFangSC-Medium;
192
+        font-weight: bold;
193
+        color:rgba(112,84,75,1);
194
+        line-height: 0.22rem;
195
+        padding-left: 0.03rem;
196
+      }
144
     }
197
     }
145
 
198
 
146
     .uploadimgbox {
199
     .uploadimgbox {
158
         width: 0.22rem;
211
         width: 0.22rem;
159
         height: 0.2rem;
212
         height: 0.2rem;
160
       }
213
       }
161
-      span {
214
+     .desc1 {
162
         font-size: 0.16rem;
215
         font-size: 0.16rem;
163
         font-family: PingFangSC-Medium;
216
         font-family: PingFangSC-Medium;
164
         font-weight: bold;
217
         font-weight: bold;
166
         line-height: 0.22rem;
219
         line-height: 0.22rem;
167
         padding-left: 0.03rem;
220
         padding-left: 0.03rem;
168
       }
221
       }
222
+      .desc2 {
223
+        font-size: 0.16rem;
224
+        font-family: PingFangSC-Medium;
225
+        font-weight: bold;
226
+        color:rgba(112,84,75,1);
227
+        line-height: 0.22rem;
228
+        padding-left: 0.03rem;
229
+      }
169
     }
230
     }
170
 
231
 
171
     .input_content {
232
     .input_content {
219
           width: 0.22rem;
280
           width: 0.22rem;
220
         height: 0.2rem;
281
         height: 0.2rem;
221
       }
282
       }
222
-      span{
223
-          font-size: 0.16rem;
283
+     .desc1 {
284
+        font-size: 0.16rem;
224
         font-family: PingFangSC-Medium;
285
         font-family: PingFangSC-Medium;
225
         font-weight: bold;
286
         font-weight: bold;
226
         color:rgba(112,125,138,1);
287
         color:rgba(112,125,138,1);
227
         line-height: 0.22rem;
288
         line-height: 0.22rem;
228
         padding-left: 0.03rem;
289
         padding-left: 0.03rem;
229
       }
290
       }
291
+      .desc2 {
292
+        font-size: 0.16rem;
293
+        font-family: PingFangSC-Medium;
294
+        font-weight: bold;
295
+        color:rgba(112,84,75,1);
296
+        line-height: 0.22rem;
297
+        padding-left: 0.03rem;
298
+      }
230
     }
299
     }
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%;
300
+
301
+    .inputbox1{
302
+width: 84%;
303
+    height: 0.4rem;
304
+    background-color: rgba(220, 229, 236, 0.63);
305
+    margin-left: calc(8%);
306
+    margin-bottom: 0.08rem;
307
+    border-radius: 0.06rem;
308
+   input{
309
+            width: 100%;
310
+    height: 100%;
311
+    background-color: rgba(255, 255, 255, 0);
312
+    text-indent: 0.12rem;
238
     }
313
     }
239
 
314
 
240
     input::-webkit-input-placeholder {
315
     input::-webkit-input-placeholder {
244
 color:rgba(117,132,146,1);
319
 color:rgba(117,132,146,1);
245
 line-height:0.22rem;
320
 line-height:0.22rem;
246
     }
321
     }
322
+    }
323
+
324
+       .inputbox2{
325
+width: 84%;
326
+    height: 0.4rem;
327
+    background-color: rgba(232,224,220,1);
328
+    margin-left: calc(8%);
329
+    margin-bottom: 0.08rem;
330
+    border-radius: 0.06rem;
331
+   input{
332
+            width: 100%;
333
+    height: 100%;
334
+    background-color: rgba(255, 255, 255, 0);
335
+    text-indent: 0.12rem;
336
+    }
247
 
337
 
248
-    .addressarea{
249
-         width: 84%;
338
+    input::-webkit-input-placeholder {
339
+     font-size:0.16rem;
340
+font-family:PingFangSC-Medium;
341
+font-weight:bold;
342
+color:rgba(139,116,102,1);
343
+line-height:0.22rem;
344
+    }
345
+    }
346
+ .textareabox1{
347
+ width: 84%;
250
         height: 0.8rem;
348
         height: 0.8rem;
251
         background-color:rgba(220,229,236,0.63);
349
         background-color:rgba(220,229,236,0.63);
252
 border-radius:0.06rem;
350
 border-radius:0.06rem;
253
-padding: 0.02rem 0.1rem;
254
-    margin: 0 0 2% 5%;
351
+ margin-left: calc(8%);
352
+   .addressarea{
353
+         width: 100%;
354
+        height: 100%;
355
+        margin-top: 0.08rem;
356
+        background-color: rgba(255, 255, 255, 0);
357
+ text-indent: 0.12rem;
255
     }
358
     }
256
      textarea::-webkit-input-placeholder {
359
      textarea::-webkit-input-placeholder {
257
      font-size:0.16rem;
360
      font-size:0.16rem;
260
 color:rgba(112,125,138,1);
363
 color:rgba(112,125,138,1);
261
 line-height:0.22rem;
364
 line-height:0.22rem;
262
     }
365
     }
366
+ }
367
+
368
+ .textareabox2{
369
+ width: 84%;
370
+        height: 0.8rem;
371
+        background-color: rgba(232,224,220,1);
372
+border-radius:0.06rem;
373
+ margin-left: calc(8%);
374
+   .addressarea{
375
+         width: 100%;
376
+        height: 100%;
377
+        margin-top: 0.08rem;
378
+        background-color: rgba(255, 255, 255, 0);
379
+ text-indent: 0.12rem;
380
+    }
381
+     textarea::-webkit-input-placeholder {
382
+     font-size:0.16rem;
383
+font-family:PingFangSC-Medium;
384
+font-weight:bold;
385
+color:rgba(139,116,102,1);
386
+line-height:0.22rem;
387
+    }
388
+ }
389
+
390
+ 
263
 .btn{
391
 .btn{
264
     width: 100%;
392
     width: 100%;
265
     display: flex;
393
     display: flex;
267
     justify-content: center;
395
     justify-content: center;
268
     margin-top: 0.2rem;
396
     margin-top: 0.2rem;
269
 
397
 
270
-       .SubmitBtn{
398
+       .SubmitBtn1{
271
         width: 44%;
399
         width: 44%;
272
     height: 0.5rem;
400
     height: 0.5rem;
273
     border-radius: 0.23rem;
401
     border-radius: 0.23rem;
280
     color: rgba(255, 255, 255, 1);
408
     color: rgba(255, 255, 255, 1);
281
     line-height: 0.28rem;
409
     line-height: 0.28rem;
282
     }
410
     }
411
+    .SubmitBtn2{
412
+             width: 44%;
413
+    height: 0.5rem;
414
+    border-radius: 0.23rem;
415
+ background:rgba(173,145,129,1);
416
+box-shadow:0px 2px 10px 0px rgba(120,108,101,0.46);
417
+    border: none;
418
+    font-size: 0.2rem;
419
+    font-family: PingFangSC-Medium;
420
+    font-weight: bold;
421
+    color: rgba(255, 255, 255, 1);
422
+    line-height: 0.28rem;
423
+    }
283
 
424
 
284
 }
425
 }
285
  
426