beizhu

src/assets/css/theme.scss

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

src/components/music.vue

@@ -2,24 +2,34 @@
     <div class="musicbox">
       <!-- 播放 -->
       <div class="play" v-if="audioPlayShow" @click="audioState">
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png">
-        <!-- <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png"> -->
+        <img :src="img?yttjmusicopen:yjsmusicopen">
+        <!-- <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png"> -->
       </div>
       <!-- 暂停-->
       <div class="play" v-else @click="audioState">
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" >
-         <!-- <img v-if="this.$route.query.actid===2" src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" > -->
+        <img  :src="img?yttjmusicoff:yttjmusicoff" >
+         <!-- <img  src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png" > -->
       </div>
       <audio ref="player" :src="url" autoplay preload loop="loop"></audio>
     </div>
 </template>
 <script>
+// import { createNamespacedHelpers } from 'vuex'
+// const {
+//   mapState: mapactivityState,
+// } = createNamespacedHelpers("vote");
 export default {
   name:'music',
   props:['url'],
   data() {
     return {
+      img:true,
+      yttjmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_open.png',
+      yjsmusicopen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_open.png',
+      yttjmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_music_close.png',
+      yjsmusicoff:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_music_close.png',
       audioPlayShow: true,
+      actid: this.$route.query.actid
     };
   },
   methods: {
@@ -38,9 +48,17 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+// @keyframes changDeg{
+// 			0%{
+// 				transform: rotate(0deg);
+// 			}
+// 			100%{
+// 				transform: rotate(360deg);
+// 			}
+// 		}
   .musicbox {
     position: fixed;
-    top: 1.27rem;
+    top: 0.09rem;
     right: 0.09rem;
     width: 0.24rem;
     height: 0.24rem;

src/views/vote/detail.vue

@@ -1,27 +1,27 @@
 <template>
-  <div class="context">
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
     <div class="ContextbBox">
-      <span class="personnumber">NO.{{detail.MemberId}}</span>
+      <span :class="desc?personnumber1:personnumber2">NO.{{detail.MemberId}}</span>
       <span class="votelist" @click="tolist">投票列表</span>
       <img :src="detail.Photo">
       <div class="detailinformation">
         <div class="nameinformation">
-          <span class="information">{{detail.Name}}</span>
-          <span class="information">姓名</span>
+          <span :class="desc?information1:information2">{{detail.Name}}</span>
+          <span :class="desc?information1:information2">姓名</span>
         </div>
-        <span class="line"></span>
+        <span :class="desc?line1:line2"></span>
         <div class="nameinformation">
-          <span class="informationnum">{{detail.Vote}}</span>
-          <span class="information">当前票数</span>
+          <span :class="desc?informationnum1:informationnum2">{{detail.Vote}}</span>
+          <span :class="desc?information1:information2">当前票数</span>
         </div>
-        <span class="line"></span>
+        <span :class="desc?line1:line2"></span>
         <div class="nameinformation">
-          <span class="information">{{detail.Rank}}名</span>
-          <span class="information">排名</span>
+          <span :class="desc?information1:information2">{{detail.Rank}}名</span>
+          <span :class="desc?information1:information2">排名</span>
         </div>
       </div>
     </div>
-    <button class="votebtn" @click="Vote">投TA一票</button>
+    <button :class="desc?votebtn1:votebtn2" @click="Vote">投TA一票</button>
     <div class="showorhide" v-if="detail.Message != ''">
       <span class="dashedline"></span>
       <span class="writeword">寄语：{{detail.Message}}</span>
@@ -33,6 +33,8 @@
 import { createNamespacedHelpers } from 'vuex';
 const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
 import toast from '../../components/toast.vue'
+import BgImg from "../../assets/bgimg.jpg";
+import BgImage from "../../assets/yttjbg.png";
 
 export default {
   name: "votingdetails",
@@ -41,6 +43,20 @@ export default {
       actid: '',
       memberid: '',
       show: false,
+      coverImgUrl:true,
+      BgImg,
+      BgImage,
+      desc:true,
+      personnumber1:'personnumber1',
+      personnumber2:'personnumber2',
+      information1:'information1',
+      information2:'information1',
+      informationnum1:'informationnum1',
+      informationnum2:"informationnum2",
+      line1:'line1',
+      line2:'line2',
+      votebtn1:'votebtn1',
+      votebtn2:'votebtn2',
     };
   },
   components: {
@@ -48,6 +64,13 @@ export default {
   },
   mounted() {
     this.actid = this.$route.params.actid;
+    if(this.actid==1){
+ this.coverImgUrl = true;
+ this.desc = true;
+    }else if(this.actid==2){
+this.coverImgUrl = false;
+this.desc = false;
+    }
     this.memberid = this.$route.params.memberid;
     this.getActivity({
       actid: this.actid,
@@ -117,7 +140,7 @@ export default {
     align-items: center;
     position: relative;
 
-    .personnumber {
+    .personnumber1 {
       position: absolute;
       top: 0;
       background-color:rgba(255,255,255,1);
@@ -129,6 +152,18 @@ export default {
       color:rgba(70,86,101,1);
       line-height: 0.25rem;
     }
+    .personnumber2 {
+      position: absolute;
+      top: 0;
+      background-color:rgba(255,255,255,1);
+      border-radius: 0 0 0.12rem 0.12rem;
+      padding: 0.01rem 0.25rem;
+      font-size: 0.18rem;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      color:rgba(112,84,75,1);
+      line-height: 0.25rem;
+    }
 
     .votelist {
       position: absolute;
@@ -155,9 +190,14 @@ export default {
       flex-direction: row;
       justify-content: space-between;
 
-      .line {
-        width: 0.01rem;
-        border: 1px solid rgba(166,184,201,1);
+      .line1 {
+        // width: 0.01rem;
+        border: 0.01rem solid rgba(166,184,201,1);
+        background-color: rgba(166,184,201,1);
+      }
+      .line2 {
+        // width: 0.01rem;
+        border: 0.01rem solid rgba(166,184,201,1);
         background-color: rgba(166,184,201,1);
       }
       .nameinformation {
@@ -165,31 +205,57 @@ export default {
         flex-direction: column;
         align-items: center;
 
-        .information {
+        .information1 {
           font-size: 0.16rem;
           font-family: JQLaoSongJT;
           color:rgba(112,125,138,1);
           line-height: 0.28rem;
           font-weight: 400;
         }
-        .informationnum {
+        .information2 {
+          font-size: 0.16rem;
+          font-family: JQLaoSongJT;
+          color:rgba(112,84,75,1);
+          line-height: 0.28rem;
+          font-weight: 400;
+        }
+        .informationnum1 {
           font-size: 0.24rem;
           font-family: JQLaoSongJT;
           color:rgba(112,125,138,1);
           line-height: 0.28rem;
         }
+          .informationnum2 {
+          font-size: 0.24rem;
+          font-family: JQLaoSongJT;
+          color:rgba(112,84,75,1);
+          line-height: 0.28rem;
+        }
       }
     }
   }
 
-  .votebtn {
+  .votebtn1 {
     width: 59%;
     height: 0.42rem;
     background: rgba(166,184,201,1);
     border-radius: 0.23rem;
     font-size: 0.2rem;
     font-family: PingFangSC-Medium;
-    font-weight: 500;
+    font-weight: blod;
+    color: rgba(255, 255, 255, 1);
+    line-height: 0.28rem;
+    border: none;
+    margin-top: 0.18rem;
+  }
+  .votebtn2{
+    width: 59%;
+    height: 0.42rem;
+    background: rgba(173,145,129,1);
+    border-radius: 0.23rem;
+    font-size: 0.2rem;
+    font-family: PingFangSC-Medium;
+    font-weight: blod;
     color: rgba(255, 255, 255, 1);
     line-height: 0.28rem;
     border: none;

src/views/vote/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="indexpage">
     <img class="bgimg" :src="activity.Thumb">
-    <button class="EnterActivity" @click="gotoactivity">进入活动</button>
+    <button :class="enter?'classone':'classtwo'" @click="gotoactivity">进入活动</button>
   </div>
 </template>
 
@@ -16,13 +16,21 @@ export default {
   name: "index",
   data() {
     return {
+      enter: true,
+      classone: 'classone',
+      classtwo: 'classtwo',
       actid: this.$route.query.actid
     };
   },
   created() {
+    if (this.$route.query.actid == 1) {
+      this.enter =true;
+    } else if (this.$route.query.actid == 2) {
+      this.enter =false;
+    }
     this.getActivity({
-      actid: this.actid,
-    })
+      actid: this.actid
+    });
   },
   computed: {
     ...mapvoteState({
@@ -35,7 +43,7 @@ export default {
       this.$router.push({
         path: `/vote/${this.actid}`
       });
-    },
+    }
   }
 };
 </script>
@@ -50,7 +58,7 @@ export default {
     width: 100%;
     height: 100%;
   }
-  .EnterActivity {
+  .classone {
     width: 75%;
     height: 0.5rem;
     border-radius: 0.25rem;
@@ -63,8 +71,39 @@ export default {
     line-height: 0.28rem;
     position: fixed;
     bottom: 0.4rem;
-    left:calc(12.5%);
+    left: calc(12.5%);
+  }
+  .classtwo {
+    width: 75%;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    background: rgba(173, 145, 129, 1);
+    border: none;
+    font-size: 0.2rem;
+    font-family: PingFangSC-Medium;
+    font-weight: bold;
+    color: white;
+    line-height: 0.28rem;
+    position: fixed;
+    bottom: 0.4rem;
+    left: calc(12.5%);
   }
+
+  // .EnterActivity {
+  //   width: 75%;
+  //   height: 0.5rem;
+  //   border-radius: 0.25rem;
+  //   background: #a6b8c9;
+  //   border: none;
+  //   font-size: 0.2rem;
+  //   font-family: PingFangSC-Medium;
+  //   font-weight: bold;
+  //   color: white;
+  //   line-height: 0.28rem;
+  //   position: fixed;
+  //   bottom: 0.4rem;
+  //   left:calc(12.5%);
+  // }
 }
 </style>
 

src/views/vote/list.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="context">
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
     <img class="BannerImage" :src="activity.Banner">
     <div :class="isOK?searchs:searchb">
       <input placeholder="输入编号或姓名" v-model="q">
@@ -15,12 +15,12 @@
             <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
               <div class="LatestUpload">
                 <div class="LatestUploadList" v-for="(item,index) in newList" :key="index">
-                  <div class="ActivePersonnelBox" @click="gotovotingdetails(item.MemberId)">
+                  <div :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2" @click="gotovotingdetails(item.MemberId)">
                     <img :src="item.Photo">
                   </div>
-                  <span class="ballot">NO.{{item.MemberId}}</span>
+                  <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
                   <span class="ActivePersonnelName">{{item.Name}}</span>
-                  <button class="VoteBtn" @click="Vote(item.MemberId)">投TA一票</button>
+                  <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
                   <div class="VoteNumber">
                     <span>已获投票数：</span>
                     <p>{{item.Vote}}票</p>
@@ -32,12 +32,12 @@
           <van-tab title="TOP50">
             <div class="LatestUpload">
               <div class="LatestUploadList" v-for="(item,index) in topList" :key="index">
-                <div class="ActivePersonnelBox" @click="gotovotingdetails(item.MemberId)">
+                <div :class="signupBtn?ActivePersonnelBox1:ActivePersonnelBox2" @click="gotovotingdetails(item.MemberId)">
                   <img :src="item.Photo">
                 </div>
-                <span class="ballot">NO.{{item.MemberId}}</span>
+                <span :class="signupBtn?ballot1:ballot2">NO.{{item.MemberId}}</span>
                 <span class="ActivePersonnelName">{{item.Name}}</span>
-                <button class="VoteBtn" @click="Vote(item.MemberId)">投TA一票</button>
+                <button :class="signupBtn?VoteBtn1:VoteBtn2" @click="Vote(item.MemberId)">投TA一票</button>
                 <div class="VoteNumber">
                   <span>已获投票数：</span>
                   <p>{{item.Vote}}票</p>
@@ -48,12 +48,14 @@
         </van-tabs>
       </div>
     </div>
-    <button class="signupBtn" @click="signup">我要报名</button>
+    <button :class="signupBtn?'signupBtnOne':'signupBtnTwo'" @click="signup">我要报名</button>
     <toast v-if="show" :url="activity.AfterVote" @close="close" @confirmbtn="tolink"></toast>
   </div>
 </template>
 
 <script>
+import BgImg from "../../assets/bgimg.jpg";
+import BgImage from "../../assets/yttjbg.png";
 import { createNamespacedHelpers } from "vuex";
 import toast from "../../components/toast.vue";
 
@@ -67,9 +69,21 @@ export default {
   data() {
     return {
       // AudioPlay: ''
-      isOK:true,
-      searchs:'searchs',
-      searchb:'searchb',
+      signupBtn:true,
+      signupBtnOne:"signupBtnOne",
+      signupBtnTwo:"signupBtnTwo",
+      VoteBtn1:'VoteBtn1',
+      VoteBtn2:'VoteBtn2',
+      ballot1:'ballot1',
+      ballot2:'ballot2',
+      coverImgUrl: true,
+      isOK: true,
+      searchs: "searchs",
+      searchb: "searchb",
+      ActivePersonnelBox1:'ActivePersonnelBox1',
+      ActivePersonnelBox2:'ActivePersonnelBox2',
+      BgImg,
+      BgImage,
       IconSearch:
         "https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_search.png",
       tab: "",
@@ -99,6 +113,16 @@ export default {
   },
   created() {
     this.actid = this.$route.params.actid;
+    console.log(this.actid);
+    if (this.actid == 1) {
+      this.coverImgUrl = true;
+      this.signupBtn =true;
+      this.isOK = true;
+    } else if (this.actid == 2) {
+      this.coverImgUrl = false;
+      this.signupBtn=false;
+      this.isOK = false;
+    }
     this.getActivity({
       actid: this.actid
     });
@@ -106,32 +130,18 @@ export default {
     this.toplist();
   },
   methods: {
-    handleScroll() {
-      // 页面滚动距顶部距离
-      var scrollTop =
-        window.pageYOffset ||
-        document.documentElement.scrollTop ||
-        document.body.scrollTop;
-         window.console.log(scrollTop);
-         if(scrollTop>=280){
-          this.isOK =false;
-        }else {
-          this.isOK=true;
-        }
-
-      var scroll = scrollTop - this.i;
-      this.i = scrollTop;
-     
-      // if (scroll < 0) {
-      //   this.isFixed =false;
-      //   console.log("up");
-      // } else {
-      //    if(this.i>=280){
-      //     this.isFixed =true;
-      //   }
-      //   console.log("down");
-      // }
-    },
+    // handleScroll() {
+    //   // 页面滚动距顶部距离
+    //   var scrollTop =
+    //     window.pageYOffset ||
+    //     document.documentElement.scrollTop ||
+    //     document.body.scrollTop;
+    //   if (scrollTop >= 280) {
+    //     this.isOK = false;
+    //   } else {
+    //     this.isOK = true;
+    //   }
+    // },
 
     ...mapactivityActions(["getList", "getTopList", "getActivity", "vote"]),
     newlist() {
@@ -263,18 +273,56 @@ export default {
     width: 100%;
     height: 3.4rem;
   }
-.searchb{
-  width: 93%;
+  .searchb {
+    width: 93%;
+    height: 0.44rem;
+    background-color: rgba(118,89,81,1);
+    border-radius: 0.22rem;
+    border: 0.01rem solid rgba(255, 255, 255, 1);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    position: absolute;
+    top: 2.8rem;
+    left: calc(3.1%);
+
+    input {
+      // padding: 0.11rem 1.2rem 0.11rem 0.13rem;
+      background-color: rgba(255, 255, 255, 0);
+      color: rgba(255, 255, 255, 1);
+      font-size: 0.16rem;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      line-height: 0.22rem;
+      width: 5rem;
+      text-indent: 0.1rem;
+    }
+    input::-webkit-input-placeholder {
+      color: rgba(255, 255, 255, 1);
+      font-size: 0.16rem;
+      font-family: PingFangSC-Regular;
+      font-weight: 400;
+      line-height: 0.22rem;
+    }
+    .IconSearch {
+      width: 0.2rem;
+      height: 0.2rem;
+      margin-right: 0.1rem;
+    }
+  }
+  .searchs {
+    width: 93%;
     height: 0.44rem;
     background-color: rgba(201, 214, 224, 1);
-    border-radius: 6px;
+    border-radius: 0.06rem;
     border: 0.01rem solid rgba(255, 255, 255, 1);
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    position: fixed;
-    top: 0;
+    position: absolute;
+    top: 2.8rem;
     left: calc(3.1%);
 
     input {
@@ -295,14 +343,17 @@ export default {
       font-weight: 400;
       line-height: 0.22rem;
     }
+
     .IconSearch {
       width: 0.2rem;
       height: 0.2rem;
       margin-right: 0.1rem;
     }
+  }
 
-}
-  .searchs {
+  #searchone{
+
+    .searchs {
     width: 93%;
     height: 0.44rem;
     background-color: rgba(201, 214, 224, 1);
@@ -341,6 +392,8 @@ export default {
       margin-right: 0.1rem;
     }
   }
+
+  }
   .informationimg {
     width: 97%;
     height: 6.24rem;
@@ -360,7 +413,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 0.19rem;
+    margin-bottom: 1rem;
 
     .VoteList {
       margin: 0.26rem 0;
@@ -386,7 +439,7 @@ export default {
           align-items: center;
           position: relative;
 
-          .ActivePersonnelBox {
+          .ActivePersonnelBox1 {
             width: 90%;
             height: 1.83rem;
             border-radius: 0.15rem;
@@ -399,7 +452,21 @@ export default {
               border-radius: 0.1rem;
             }
           }
-          .ballot {
+ .ActivePersonnelBox2 {
+            width: 90%;
+            height: 1.83rem;
+            border-radius: 0.15rem;
+            margin-bottom: 0.11rem;
+            border: 0.04rem solid rgba(126,100,86,1);
+
+            img {
+              width: 100%;
+              height: 100%;
+              border-radius: 0.1rem;
+            }
+          }
+
+          .ballot1 {
             position: absolute;
             top: 0;
             background: rgba(166, 184, 201, 1);
@@ -411,6 +478,18 @@ export default {
             color: rgba(255, 255, 255, 1);
             line-height: 0.2rem;
           }
+          .ballot2 {
+            position: absolute;
+            top: 0;
+            background: rgba(126,100,86,1);
+            border-radius: 0 0 0.08rem 0.08rem;
+            padding: 0.02rem 0.12rem;
+            font-size: 0.14rem;
+            font-family: PingFangSC-Medium;
+            font-weight: bold;
+            color: rgba(255, 255, 255, 1);
+            line-height: 0.2rem;
+          }
 
           .ActivePersonnelName {
             font-size: 0.16rem;
@@ -421,7 +500,7 @@ export default {
             padding-bottom: 0.11rem;
           }
 
-          .VoteBtn {
+          .VoteBtn1 {
             width: 56%;
             height: 0.23rem;
             border-radius: 0.25rem;
@@ -434,6 +513,19 @@ export default {
             line-height: 0.2rem;
             margin-bottom: 0.14rem;
           }
+          .VoteBtn2{
+            width: 56%;
+            height: 0.23rem;
+            border-radius: 0.25rem;
+            background-color: rgba(126,100,86,1);
+            border: none;
+            font-size: 0.14rem;
+            font-family: PingFangSC-Medium;
+            font-weight: bold;
+            color: rgba(255, 255, 255, 1);
+            line-height: 0.2rem;
+            margin-bottom: 0.14rem;
+          }
 
           .VoteNumber {
             display: flex;
@@ -458,8 +550,8 @@ export default {
       }
     }
   }
-  .signupBtn {
-    width: 91%;
+  .signupBtnOne{
+     width: 91%;
     height: 0.5rem;
     border-radius: 0.25rem;
     background: rgba(166, 184, 201, 1);
@@ -473,6 +565,36 @@ export default {
     bottom: 0.19rem;
     left: calc(4.25%);
   }
+  .signupBtnTwo{
+     width: 91%;
+    height: 0.5rem;
+    border-radius: 0.25rem;
+    background: rgba(173,145,129,1);
+    border: none;
+    font-size: 0.2rem;
+    font-family: PingFangSC-Medium;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    line-height: 0.28rem;
+    position: fixed;
+    bottom: 0.19rem;
+    left: calc(4.25%);
+  }
+  // .signupBtn {
+  //   width: 91%;
+  //   height: 0.5rem;
+  //   border-radius: 0.25rem;
+  //   background: rgba(166, 184, 201, 1);
+  //   border: none;
+  //   font-size: 0.2rem;
+  //   font-family: PingFangSC-Medium;
+  //   font-weight: bold;
+  //   color: rgba(255, 255, 255, 1);
+  //   line-height: 0.28rem;
+  //   position: fixed;
+  //   bottom: 0.19rem;
+  //   left: calc(4.25%);
+  // }
 }
 </style>
 

src/views/vote/signup.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="context">
+  <div class="context" :style="{backgroundImage: 'url(' + (coverImgUrl ?BgImage:BgImg) + ')'}">
     <div class="ContextBox">
       <div class="uploadimg">
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png">
-        <span>上传您认为最美的全家福照片</span>
+        <img :src="img?yttjlove:yjslove">
+        <span :class="desc?desc1:desc2">上传您认为最美的全家福照片</span>
       </div>
       <van-uploader :after-read="onRead">
-        <img class="uploadimgbox" :src="uploadimg">
+        <img class="uploadimgbox" :src="desc?uploadimg1:uploadimg2">
       </van-uploader>
-      <div class="WriteWord">
-        <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png">
-        <span>寄语</span>
+      <div class="WriteWord" v-if="writeword">
+        <img :src="img?yttjpen:yjspen">
+        <span :class="desc?desc1:desc2">寄语</span>
       </div>
-      <div class="input_content">
+      <div class="input_content" v-if="writeword">
         <textarea id="textArea" @input="messageWrite" maxlength="200" v-model="postData.message" class="content_txt" ></textarea>
         <span class="number">
           <span id="textNum">{{messagenum}}</span>
@@ -20,14 +20,21 @@
         </span>
       </div>
       <div class="ContactInformation">
-          <img src="https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png"/>
-          <span>联系方式</span>
+          <img :src="img?yttjphone:yjsphone"/>
+          <span :class="desc?desc1:desc2">联系方式</span>
+      </div>
+      <div :class="desc?inputbox1:inputbox2">
+        <input placeholder="输入手机号" v-model="postData.phone"/>
+      </div>
+      
+      <div :class="desc?inputbox1:inputbox2">
+        <input placeholder="输入姓名" v-model="postData.name"/>
+      </div>  
+      <div :class="desc?textareabox1:textareabox2" v-if="address">
+      <textarea class="addressarea" placeholder="所在社区" ></textarea>
       </div>
-      <input placeholder="输入手机号" v-model="postData.phone"/>
-      <input placeholder="输入姓名" v-model="postData.name"/>
-      <!-- <textarea class="addressarea" placeholder="所在社区" ></textarea> -->
       <div class="btn">
-          <button class="SubmitBtn" @click="SubmitBtn">提交</button>
+          <button :class="desc?SubmitBtn1:SubmitBtn2" @click="SubmitBtn">提交</button>
       </div>
     </div>
   </div>
@@ -35,13 +42,37 @@
 
 <script>
 import { createNamespacedHelpers } from 'vuex';
+import BgImg from "../../assets/bgimg.jpg";
+import BgImage from "../../assets/yttjbg.png";
 const {mapState: mapVoteState, mapActions: mapVoteActions} = createNamespacedHelpers('vote')
 export default {
   name: 'signup',
   data() {
     return {
+      writeword:false,
+      address:false,
+      desc:true,
+      desc1:'desc1',
+      desc2:'desc2',
+      inputbox1:'inputbox1',
+      inputbox2:'inputbox2',
+      textareabox1:'textareabox1',
+      textareabox2:'textareabox2',
+      SubmitBtn1:'SubmitBtn1',
+      SubmitBtn2:'SubmitBtn2',
+      coverImgUrl: true,
+      BgImg,
+      BgImage,
+      img:true,
       isLoading: false,
-      uploadimg: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png',
+      uploadimg1: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/uploadimg.png',
+      uploadimg2: 'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjsuploadimg.png',
+      yttjlove:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_love.png',
+      yttjpen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_pen.png',
+      yttjphone:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yttj_icon_phone.png',
+      yjslove:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_love.png',
+      yjspen:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_pen.png',
+      yjsphone:'https://spaceofcheng.oss-cn-beijing.aliyuncs.com/voting/yjs_icon_phone.png',
       messagenum: 0,
       postData: {
         photo: '',
@@ -59,6 +90,20 @@ export default {
     })
   },
   created () {
+    this.actid = this.$route.params.actid
+    if(this.actid==1){
+      this.coverImgUrl = true;
+      this.img=true;
+      this.address=false;
+      this.writeword=true;
+      this.desc=true;
+    }else if(this.actid==2){
+      this.coverImgUrl = false;
+      this.img=false;
+      this.address=true;
+      this.writeword=false;
+      this.desc=false;
+    }
     if(this.$route.params.actid != '') {
       this.actid = this.$route.params.actid
     } else {
@@ -133,7 +178,7 @@ export default {
         height: 0.2rem;
       }
 
-      span {
+      .desc1 {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bold;
@@ -141,6 +186,14 @@ export default {
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
+      .desc2 {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bold;
+        color:rgba(112,84,75,1);
+        line-height: 0.22rem;
+        padding-left: 0.03rem;
+      }
     }
 
     .uploadimgbox {
@@ -158,7 +211,7 @@ export default {
         width: 0.22rem;
         height: 0.2rem;
       }
-      span {
+     .desc1 {
         font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bold;
@@ -166,6 +219,14 @@ export default {
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
+      .desc2 {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bold;
+        color:rgba(112,84,75,1);
+        line-height: 0.22rem;
+        padding-left: 0.03rem;
+      }
     }
 
     .input_content {
@@ -219,22 +280,36 @@ line-height:0.2rem;
           width: 0.22rem;
         height: 0.2rem;
       }
-      span{
-          font-size: 0.16rem;
+     .desc1 {
+        font-size: 0.16rem;
         font-family: PingFangSC-Medium;
         font-weight: bold;
         color:rgba(112,125,138,1);
         line-height: 0.22rem;
         padding-left: 0.03rem;
       }
+      .desc2 {
+        font-size: 0.16rem;
+        font-family: PingFangSC-Medium;
+        font-weight: bold;
+        color:rgba(112,84,75,1);
+        line-height: 0.22rem;
+        padding-left: 0.03rem;
+      }
     }
-    input{
-        width: 84%;
-        height: 0.4rem;
-        background-color:rgba(220,229,236,0.63);
-border-radius:0.06rem;
-padding: 0.02rem 0.1rem;
-    margin: 0 0 2% 5%;
+
+    .inputbox1{
+width: 84%;
+    height: 0.4rem;
+    background-color: rgba(220, 229, 236, 0.63);
+    margin-left: calc(8%);
+    margin-bottom: 0.08rem;
+    border-radius: 0.06rem;
+   input{
+            width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    text-indent: 0.12rem;
     }
 
     input::-webkit-input-placeholder {
@@ -244,14 +319,42 @@ font-weight:bold;
 color:rgba(117,132,146,1);
 line-height:0.22rem;
     }
+    }
+
+       .inputbox2{
+width: 84%;
+    height: 0.4rem;
+    background-color: rgba(232,224,220,1);
+    margin-left: calc(8%);
+    margin-bottom: 0.08rem;
+    border-radius: 0.06rem;
+   input{
+            width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0);
+    text-indent: 0.12rem;
+    }
 
-    .addressarea{
-         width: 84%;
+    input::-webkit-input-placeholder {
+     font-size:0.16rem;
+font-family:PingFangSC-Medium;
+font-weight:bold;
+color:rgba(139,116,102,1);
+line-height:0.22rem;
+    }
+    }
+ .textareabox1{
+ width: 84%;
         height: 0.8rem;
         background-color:rgba(220,229,236,0.63);
 border-radius:0.06rem;
-padding: 0.02rem 0.1rem;
-    margin: 0 0 2% 5%;
+ margin-left: calc(8%);
+   .addressarea{
+         width: 100%;
+        height: 100%;
+        margin-top: 0.08rem;
+        background-color: rgba(255, 255, 255, 0);
+ text-indent: 0.12rem;
     }
      textarea::-webkit-input-placeholder {
      font-size:0.16rem;
@@ -260,6 +363,31 @@ font-weight:bold;
 color:rgba(112,125,138,1);
 line-height:0.22rem;
     }
+ }
+
+ .textareabox2{
+ width: 84%;
+        height: 0.8rem;
+        background-color: rgba(232,224,220,1);
+border-radius:0.06rem;
+ margin-left: calc(8%);
+   .addressarea{
+         width: 100%;
+        height: 100%;
+        margin-top: 0.08rem;
+        background-color: rgba(255, 255, 255, 0);
+ text-indent: 0.12rem;
+    }
+     textarea::-webkit-input-placeholder {
+     font-size:0.16rem;
+font-family:PingFangSC-Medium;
+font-weight:bold;
+color:rgba(139,116,102,1);
+line-height:0.22rem;
+    }
+ }
+
+ 
 .btn{
     width: 100%;
     display: flex;
@@ -267,7 +395,7 @@ line-height:0.22rem;
     justify-content: center;
     margin-top: 0.2rem;
 
-       .SubmitBtn{
+       .SubmitBtn1{
         width: 44%;
     height: 0.5rem;
     border-radius: 0.23rem;
@@ -280,6 +408,19 @@ box-shadow:0px 2px 10px 0px rgba(207,217,227,1);
     color: rgba(255, 255, 255, 1);
     line-height: 0.28rem;
     }
+    .SubmitBtn2{
+             width: 44%;
+    height: 0.5rem;
+    border-radius: 0.23rem;
+ background:rgba(173,145,129,1);
+box-shadow:0px 2px 10px 0px rgba(120,108,101,0.46);
+    border: none;
+    font-size: 0.2rem;
+    font-family: PingFangSC-Medium;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 1);
+    line-height: 0.28rem;
+    }
 
 }