修改投票自荐页面为pc和mobile两种样式

package.json

@@ -9,6 +9,7 @@
     "dev-build": "vue-cli-service build --mode dev"
   },
   "dependencies": {
+    "@vant/touch-emulator": "^1.2.0",
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.9.4",
@@ -19,15 +20,15 @@
     "vant": "^2.12.9",
     "vue": "^2.6.12",
     "vue-meta": "^2.4.0",
-    "vue-router": "^3.4.8",
-    "vuex": "^3.5.1"
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.8",
-    "@vue/cli-plugin-eslint": "~4.5.8",
-    "@vue/cli-plugin-router": "~4.5.8",
-    "@vue/cli-plugin-vuex": "~4.5.8",
-    "@vue/cli-service": "~4.5.8",
+    "@vue/cli-plugin-babel": "~4.5.11",
+    "@vue/cli-plugin-eslint": "~4.5.11",
+    "@vue/cli-plugin-router": "~4.5.11",
+    "@vue/cli-plugin-vuex": "~4.5.11",
+    "@vue/cli-service": "~4.5.11",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",

src/assets/css/base.css

@@ -182,6 +182,9 @@ input[type='search']::-webkit-search-cancel-button {
   color: #999;
   -webkit-text-fill-color: currentColor;
 }
+.form .form-item__tips {
+  color: #999;
+}
 .line-clamp {
   display: -webkit-box;
   -webkit-line-clamp: 2;

src/components/Form.vue

@@ -15,10 +15,11 @@
             @click="showPicker(item)"
             v-if="item.isShow ? item.isShow(ruleForm) : true"
           >
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
           </van-field>
         </template>
 
@@ -35,10 +36,11 @@
             @click="showPicker(item)"
             v-if="item.isShow ? item.isShow(ruleForm) : true"
           >
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
           </van-field>
         </template>
 
@@ -55,10 +57,11 @@
             @click="showPicker(item)"
             v-if="item.isShow ? item.isShow(ruleForm) : true"
           >
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
           </van-field>
         </template>
 
@@ -71,10 +74,11 @@
             v-model="ruleForm[item.name]"
             v-if="item.isShow ? item.isShow(ruleForm) : true"
           >
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
             <template #input>
               <upload v-model="ruleForm[item.name]" v-bind="item" :max-count="1" />
             </template>
@@ -84,10 +88,11 @@
         <!-- 上传多个图片 -->
         <template v-else-if="item.fieldType === 'upliadMultiple'">
           <van-field :border="false" :required="false" v-bind="item" v-if="item.isShow ? item.isShow(ruleForm) : true">
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
             <template #input>
               <UpliadMultiple v-model="ruleForm[item.name]" />
             </template>
@@ -97,10 +102,11 @@
         <!-- 上传视频 -->
         <template v-else-if="item.fieldType === 'video'">
           <van-field :border="false" :required="false" v-bind="item" v-if="item.isShow ? item.isShow(ruleForm) : true">
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
             <template #input>
               <UploadVideo v-on="$listeners" v-model="ruleForm[item.name]" accept="video/*" />
             </template>
@@ -116,10 +122,11 @@
             v-model="ruleForm[item.name]"
             v-if="item.isShow ? item.isShow(ruleForm) : true"
           >
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
             <template #input>
               <van-radio-group v-model="ruleForm[item.name]" direction="horizontal">
                 <van-radio :name="item.name" v-for="item in item.values" :key="item.name">{{ item.text }}</van-radio>
@@ -137,10 +144,11 @@
             v-model.trim="ruleForm[item.name]"
             v-if="item.isShow ? item.isShow(ruleForm) : true"
           >
-            <!-- <template #label>
+            <template #label>
               {{ item.label }}
-              <span class="red" v-if="item.required">*</span>
-            </template>-->
+              <div class="form-item__tips" v-if="item.tips">{{ item.tips }}</div>
+              <!-- <span class="red" v-if="item.required">*</span> -->
+            </template>
           </van-field>
         </template>
       </div>

src/main.js

@@ -5,6 +5,7 @@ import store from '@/store'
 
 import Vant from 'vant'
 import 'vant/lib/index.css'
+import '@vant/touch-emulator'
 
 Vue.use(Vant)
 

src/views/vote/Apply.vue

 <template>
-  <div class="vote-submit">
-    <h1 class="vote-submit__title">紫荆校友自荐信息填写</h1>
+  <div class="vote-submit" :class="classes">
+    <div class="vote-submit-header">
+      <div class="inner">
+        <div class="vote-submit-logo"></div>
+        <h1 class="vote-submit__title"><span class="t1">紫荆校友</span><span class="t2">理事自荐表</span></h1>
+        <div class="vote-submit-banner"></div>
         <p class="vote-submit__tips">
           注：以下填写信息将在投票页面予以公示，请自荐人如实认真填写；如一次无法填写完成，建议将填写内容粘贴至WORD文档保存，防止下次打开时遗失已填写内容。
         </p>
+      </div>
+    </div>
+    <div class="vote-submit-main">
+      <h3>自荐信息</h3>
       <v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
         <input type="button" value="提交" class="submit-button" @click="handleSubmit" />
       </v-form>
     </div>
+  </div>
 </template>
 
 <script>
@@ -18,7 +27,10 @@ export default {
   name: 'VoteApply',
   components: { VForm },
   data() {
+    const UA = window.navigator.userAgent
+    const isMobile = /android|iphone|ipad|ipod/i.test(UA)
     return {
+      isMobile,
       applyCityList: [],
       formModel: {
         vote_config_id: '',
@@ -46,11 +58,18 @@ export default {
     }
   },
   computed: {
+    classes() {
+      return {
+        'is-pc': !this.isMobile,
+        'is-mobile': this.isMobile
+      }
+    },
     fields() {
       return [
         {
           fieldType: 'select',
           name: 'vote_config_id',
+          label: '校友地区',
           required: true,
           placeholder: '请选择地区',
           rules: [{ required: true, message: '请选择地区' }],
@@ -149,24 +168,22 @@ export default {
         {
           type: 'textarea',
           name: 'recommend',
-          label:
-            '推荐说明（包含您对校友会工作的认识、您会在哪些方面为校友工作做出贡献、您目前是否有足够的时间担任该职务等，不少于150字）',
+          label: '自荐说明',
+          tips:
+            '（包含您对校友会工作的认识、您会在哪些方面为校友工作做出贡献、您目前是否有足够的时间担任该职务等，不少于150字）',
           required: true,
-          placeholder: '推荐说明',
-          autosize: { maxHeight: 200, minHeight: 120 },
+          placeholder: '自荐说明',
+          autosize: { maxHeight: 300, minHeight: 180 },
           rules: [
-            { required: true, message: '请输入推荐说明' },
-            {
-              validator: value => value.length > 150,
-
-              message: '内容不少于150字'
-            }
+            { required: true, message: '请输入自荐说明' },
+            { validator: value => value.length > 150, message: '内容不少于150字' }
           ]
         },
         {
           fieldType: 'uploader',
           name: 'photo',
-          label: '上传个人一寸免冠清晰证件照,投票时公示使用。（图片大小400K以内）',
+          label: '上传个人一寸免冠清晰证件照,投票时公示使用。',
+          tips: '（图片大小400K以内）',
           required: true,
           maxSize: 400 * 1024,
           rules: [{ required: true, message: '请上传图片' }]
@@ -224,27 +241,173 @@ export default {
       this.formModel = JSON.parse(voteApply)
     }
     this.getApplyCity()
+  },
+  beforeCreate() {
+    if (!this.isMobile) {
+      document.querySelector('#app').style.maxWidth = 'none'
+    }
+  },
+  destroyed() {
+    if (!this.isMobile) {
+      document.querySelector('#app').style.maxWidth = ''
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.vote-submit {
-  margin: 0 20px;
+.is-pc {
+  .vote-submit-header {
+    height: 260px;
+    color: #fff;
+    background: url('../../assets/img/vote/vote_submit_bg.png') no-repeat;
+    overflow: hidden;
+  }
+  .inner {
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+  .vote-submit-logo {
+    width: 110px;
+    height: 37px;
+    margin-top: 23px;
+    background: url('../../assets/img/vote/vote_submit_logo.png') no-repeat;
+    background-size: contain;
+  }
+  .vote-submit-main {
+    max-width: 1000px;
+    background: #fff;
+    border-radius: 5px;
+    margin: 15px auto 30px;
+    padding: 0 40px;
+  }
+  .vote-submit__title {
+    padding: 38px 0 50px;
+    font-size: 30px;
+    color: #fff;
+    line-height: 42px;
+    text-align: center;
+  }
+  .vote-submit__tips {
+    font-size: 20px;
+  }
+  .vote-submit-main h3 {
+    padding: 20px 0;
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 20px;
+    font-weight: normal;
+  }
+  ::v-deep .van-cell {
+    flex-direction: row;
+  }
   ::v-deep .van-field__label {
-    width: auto;
+    width: 186px !important;
+    text-align: right;
+    padding-top: 8px;
+  }
+  ::v-deep .form-item__tips {
+    text-align: left;
   }
-  ::v-deep .van-uploader {
-    width: 1.6rem;
+  .form {
+    max-width: 470px;
+    margin-left: 160px;
+  }
+  .submit-button {
+    margin-left: 196px;
   }
 }
-.vote-submit__title {
-  font-size: 20px;
+
+.is-mobile {
+  background: url('../../assets/img/vote/vote_submit_mobile_bg.png') no-repeat center top;
+  background-size: contain;
+  padding: 0 20px;
+  .vote-submit-main {
+    margin-bottom: 20px;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.05);
+    border-radius: 4px;
+    h3 {
+      display: none;
+    }
+  }
+  .vote-submit__title {
+    float: left;
+    span {
+      display: block;
+    }
+    .t1 {
+      margin-top: 40px;
+      font-size: 23px;
+      line-height: 23px;
+      letter-spacing: 1px;
+    }
+    .t2 {
+      margin-top: 10px;
+      font-size: 18px;
+      line-height: 18px;
+      letter-spacing: 1px;
+    }
+  }
+  .vote-submit-banner {
+    float: right;
+    margin-top: 15px;
+    width: 137px;
+    height: 95px;
+    background: url('../../assets/img/vote/vote_submit_mobile_pic.png') no-repeat center top;
+    background-size: contain;
+  }
+  .vote-submit__tips {
+    clear: both;
     padding: 20px 0;
-  text-align: center;
+    font-size: 12px;
+    color: #666;
+  }
+  ::v-deep .van-field__label {
+    width: auto;
+    padding: 0 10px;
+    margin-right: 0;
+  }
+  .submit-button {
+    margin: 20px auto 0;
+  }
+}
+
+::v-deep .van-field__control {
+  border-color: #f1f1f1 !important;
+  border-radius: 4px;
+}
+::v-deep .van-field__right-icon {
+  color: #666 !important;
+}
+
+.vote-submit {
+  background-color: #f5f6fa;
+  overflow: hidden;
+
+  ::v-deep .van-uploader,
+  ::v-deep .van-uploader__upload,
+  ::v-deep .van-uploader__preview-image {
+    width: 100px;
+    height: 100px;
+    background: #fff;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  ::v-deep .van-uploader__upload {
+    border: 1px solid #f1f1f1;
+  }
+  ::v-deep .van-uploader__upload-icon {
+    font-size: 24px;
+  }
 }
 .vote-submit__tips {
   line-height: 1.5;
   padding-bottom: 20px;
 }
+.submit-button {
+  width: 148px;
+  background: linear-gradient(315deg, rgba(225, 47, 116, 0.83) 0%, #c01540 100%);
+  border-radius: 4px;
+}
 </style>