Skip to content

A
alumni-show-h5
提交 6b18c55f authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

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

上级 e9fcfafd
隐藏空白字符变更
内嵌 并排
正在显示 包含 234 行增加 和 58 行删除
package-lock.json
浏览文件 @ 6b18c55f
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
浏览文件 @ 6b18c55f
......@@ -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
浏览文件 @ 6b18c55f
......@@ -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
浏览文件 @ 6b18c55f
......@@ -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
浏览文件 @ 6b18c55f
......@@ -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
浏览文件 @ 6b18c55f
<template>
<div class="vote-submit">
<h1 class="vote-submit__title">紫荆校友自荐信息填写</h1>
<p class="vote-submit__tips">
注：以下填写信息将在投票页面予以公示，请自荐人如实认真填写；如一次无法填写完成，建议将填写内容粘贴至WORD文档保存，防止下次打开时遗失已填写内容。
</p>
<v-form ref="form" :model="formModel" :fields="fields" @submit="onSubmit">
<input type="button" value="提交" class="submit-button" @click="handleSubmit" />
</v-form>
<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>
......@@ -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: 186px !important;
text-align: right;
padding-top: 8px;
}
::v-deep .form-item__tips {
text-align: left;
}
.form {
max-width: 470px;
margin-left: 160px;
}
.submit-button {
margin-left: 196px;
}
}
.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;
font-size: 12px;
color: #666;
}
::v-deep .van-field__label {
width: auto;
padding: 0 10px;
margin-right: 0;
}
::v-deep .van-uploader {
width: 1.6rem;
.submit-button {
margin: 20px auto 0;
}
}
.vote-submit__title {
font-size: 20px;
padding: 20px 0;
text-align: center;
::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>
yarn.lock
浏览文件 @ 6b18c55f
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论