577 lines
14 KiB
Vue
577 lines
14 KiB
Vue
|
<template>
|
|||
|
|
<view class="page">
|
|||
|
|
<u-navbar title="投诉建议" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
|
|||
|
|
title-size='36' height='46' id="navbar">
|
|||
|
|
</u-navbar>
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 问题分类选择 -->
|
|||
|
|
<view class="category-section">
|
|||
|
|
<view class="category-grid">
|
|||
|
|
<view
|
|||
|
|
v-for="(category, index) in categories"
|
|||
|
|
:key="index"
|
|||
|
|
class="category-item"
|
|||
|
|
:class="{ 'active': selectedCategory == index }"
|
|||
|
|
@click="selectCategory(index)">
|
|||
|
|
<view class="category-icon">
|
|||
|
|
<image class="icon" :src="category.icon" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<text class="category-text">{{ category.name }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 问题描述 -->
|
|||
|
|
<view class="description-section">
|
|||
|
|
<text class="section-title">请描述具体问题</text>
|
|||
|
|
<textarea
|
|||
|
|
v-model="problemDescription"
|
|||
|
|
class="description-textarea"
|
|||
|
|
placeholder="尽量详细描述您遇到的问题和现象、具体位置及表现形式等"
|
|||
|
|
maxlength="1000"
|
|||
|
|
@input="onDescriptionInput"
|
|||
|
|
></textarea>
|
|||
|
|
<text class="char-count">{{ descriptionLength }}/1000</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- 图片补充 -->
|
|||
|
|
<view class="image-section">
|
|||
|
|
<text class="section-title">图片补充: <text class="hint">(相关图或录屏能快速解决问题)</text></text>
|
|||
|
|
<view class="media-grid">
|
|||
|
|
<view class="mediaitem" v-for="(item,index) in mediaList" :key="index">
|
|||
|
|
<!-- 图片预览 -->
|
|||
|
|
<image v-if="item.type === 'image'" class="media-preview" :src="item.url" mode="aspectFill" @click="previewMedia(index)"></image>
|
|||
|
|
<!-- 视频预览 -->
|
|||
|
|
<video v-else-if="item.type === 'video'" class="media-preview" :src="item.url" :poster="item.poster" controls="true" :show-play-btn="true" :show-center-play-btn="true" :enable-progress-gesture="true" :enable-fullscreen="true" @click="previewMedia(index)">
|
|||
|
|
<!-- <cover-view class="play-icon" @click.stop="previewMedia(index)">▶</cover-view> -->
|
|||
|
|
</video>
|
|||
|
|
<!-- 删除按钮 -->
|
|||
|
|
<view class="delete-btn" @click="deleteMedia(index)">
|
|||
|
|
<text class="delete-icon">×</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="upload-btn" @click="btnsc" v-if="mediaList.length < 9">
|
|||
|
|
<image class="sc" src="https://api.ccttiot.com/smartmeter/img/static/u3z28zohbXoJ5kWcR6X1" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 联系方式 -->
|
|||
|
|
<view class="contact-section">
|
|||
|
|
<text class="section-title">联系方式: <text class="required">(必填)</text></text>
|
|||
|
|
<input
|
|||
|
|
v-model="contactInfo"
|
|||
|
|
class="contact-input"
|
|||
|
|
placeholder="手机号/邮箱/QQ/微信号,方便我们与您联系"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="" style="width: 100%;height: 86rpx;background-color: #F6F6F6;"></view>
|
|||
|
|
<!-- 提交按钮 -->
|
|||
|
|
<view class="submit-section">
|
|||
|
|
<view class="submit-btn" @click="submitFeedback">提交</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
bgc: {
|
|||
|
|
backgroundColor: "#fff",
|
|||
|
|
},
|
|||
|
|
// 问题分类数据
|
|||
|
|
categories: [
|
|||
|
|
{ name: '页面闪退', icon: 'https://api.ccttiot.com/smartmeter/img/static/uCZ2dcjDqtIAVZWgNCvn' },
|
|||
|
|
{ name: '操作体验', icon: 'https://api.ccttiot.com/smartmeter/img/static/uGbK1qzBx2eoJs3Whvqv' },
|
|||
|
|
{ name: '账号问题', icon: 'https://api.ccttiot.com/smartmeter/img/static/uuF3bCqzqO5ifMGcjC21' },
|
|||
|
|
{ name: '平台帖子', icon: 'https://api.ccttiot.com/smartmeter/img/static/u35iPJBXonm3jkHztxq6' },
|
|||
|
|
{ name: '吐槽', icon: 'https://api.ccttiot.com/smartmeter/img/static/uUfgRTkGCD07tAg0n7hn' },
|
|||
|
|
{ name: '其他反馈', icon: 'https://api.ccttiot.com/smartmeter/img/static/uWsN7D9O89cVibjD6x0q' }
|
|||
|
|
],
|
|||
|
|
selectedCategory: 0, // 默认选中第一个
|
|||
|
|
problemDescription: '',
|
|||
|
|
descriptionLength: 0,
|
|||
|
|
uploadedImage: '',
|
|||
|
|
contactInfo: '',
|
|||
|
|
mediaList: [], // 媒体文件列表
|
|||
|
|
token: '' // 七牛云上传token
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
canSubmit() {
|
|||
|
|
return this.contactInfo.trim() !== ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getqiniuyun()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取七牛云上传token
|
|||
|
|
getqiniuyun(){
|
|||
|
|
this.$u.get("/common/qiniuToken").then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
this.token = res.data
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 选择问题分类
|
|||
|
|
selectCategory(index) {
|
|||
|
|
this.selectedCategory = index
|
|||
|
|
},
|
|||
|
|
// 问题描述输入
|
|||
|
|
onDescriptionInput(e) {
|
|||
|
|
this.descriptionLength = e.detail.value.length
|
|||
|
|
},
|
|||
|
|
// 点击上传媒体文件
|
|||
|
|
btnsc(){
|
|||
|
|
if(this.mediaList.length >= 9){
|
|||
|
|
return uni.showToast({ title: '最多选择九张图片或视频', icon: 'none',duration:3000 })
|
|||
|
|
}
|
|||
|
|
let _this = this
|
|||
|
|
uni.chooseMessageFile({
|
|||
|
|
count: 9,
|
|||
|
|
type: 'all',
|
|||
|
|
success(res) {
|
|||
|
|
const tempFilePaths = res.tempFiles
|
|||
|
|
tempFilePaths.forEach(file => {
|
|||
|
|
wx.uploadFile({
|
|||
|
|
url: 'https://up-z2.qiniup.com',
|
|||
|
|
name: 'file',
|
|||
|
|
filePath: file.path, //文件路径
|
|||
|
|
formData: {
|
|||
|
|
token: _this.token, //后端返回的token
|
|||
|
|
key: _this.getUploadFileName(file.path) //传的文件名称
|
|||
|
|
},
|
|||
|
|
success: function(res) {
|
|||
|
|
let str = JSON.parse(res.data)
|
|||
|
|
let fileUrl = 'https://api.ccttiot.com/' + str.key
|
|||
|
|
// 根据文件后缀名判断类型
|
|||
|
|
let fileType = _this.getFileType(file.path)
|
|||
|
|
// 添加到媒体列表
|
|||
|
|
_this.mediaList.push({
|
|||
|
|
url: fileUrl,
|
|||
|
|
type: fileType,
|
|||
|
|
poster: fileType === 'video' ? null : null // 视频不设置poster，避免加载失败
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 获取上传的文件名
|
|||
|
|
getUploadFileName(fileName) {
|
|||
|
|
return fileName.slice(fileName.lastIndexOf("/") + 1, fileName.length);
|
|||
|
|
},
|
|||
|
|
// 根据文件路径判断文件类型
|
|||
|
|
getFileType(filePath) {
|
|||
|
|
const extension = filePath.toLowerCase().split('.').pop()
|
|||
|
|
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
|
|||
|
|
const videoExtensions = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv']
|
|||
|
|
if (imageExtensions.includes(extension)) {
|
|||
|
|
return 'image'
|
|||
|
|
} else if (videoExtensions.includes(extension)) {
|
|||
|
|
return 'video'
|
|||
|
|
} else {
|
|||
|
|
return 'image' // 默认当作图片处理
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 预览媒体文件 - 图文混合预览
|
|||
|
|
previewMedia(index) {
|
|||
|
|
const media = this.mediaList[index]
|
|||
|
|
console.log('预览媒体:', media)
|
|||
|
|
console.log('当前索引:', index)
|
|||
|
|
// 统一在微信小程序端使用 previewMedia 实现图文混合预览
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
const sources = this.mediaList.map((item) => {
|
|||
|
|
if (item.type === 'video') {
|
|||
|
|
return {
|
|||
|
|
url: item.url,
|
|||
|
|
type: 'video',
|
|||
|
|
poster: item.poster || ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
url: item.url,
|
|||
|
|
type: 'image'
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
console.log('预览源数据:', sources)
|
|||
|
|
uni.previewMedia({
|
|||
|
|
current: index,
|
|||
|
|
sources,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('预览成功:', res)
|
|||
|
|
},
|
|||
|
|
fail: (err) => {
|
|||
|
|
console.error('预览失败:', err)
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '预览失败',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration:3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
// #endif
|
|||
|
|
// 其他平台回退为仅图片可预览
|
|||
|
|
if (media.type === 'video') {
|
|||
|
|
// 视频全屏播放
|
|||
|
|
this.playVideo(index)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 图片预览
|
|||
|
|
const urls = this.mediaList.filter(item => item.type === 'image').map(item => item.url)
|
|||
|
|
if (!urls.length) return
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: urls,
|
|||
|
|
current: media.url
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 播放视频
|
|||
|
|
playVideo(index) {
|
|||
|
|
const media = this.mediaList[index]
|
|||
|
|
console.log(media);
|
|||
|
|
if (media.type == 'video') {
|
|||
|
|
// 使用uni.previewVideo进行全屏播放
|
|||
|
|
uni.previewVideo({
|
|||
|
|
sources: [{
|
|||
|
|
src: media.url,
|
|||
|
|
type: 'mp4'
|
|||
|
|
}],
|
|||
|
|
autoplay: true,
|
|||
|
|
loop: false,
|
|||
|
|
defaultMuted: false,
|
|||
|
|
showPlayBtn: true,
|
|||
|
|
showCenterPlayBtn: true,
|
|||
|
|
enableProgressGesture: true,
|
|||
|
|
showFullscreenBtn: true,
|
|||
|
|
showMuteBtn: true
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 删除媒体文件
|
|||
|
|
deleteMedia(index) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认删除',
|
|||
|
|
content: '确定要删除这个文件吗？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
this.mediaList.splice(index, 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 提交反馈
|
|||
|
|
submitFeedback() {
|
|||
|
|
if (!this.canSubmit) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请填写联系方式',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration:3000
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 构建提交数据
|
|||
|
|
const imageUrls = this.mediaList.map(item => item.url).join(',')
|
|||
|
|
const data = {
|
|||
|
|
// category: this.categories[this.selectedCategory].name,
|
|||
|
|
content: this.problemDescription,
|
|||
|
|
image: imageUrls,
|
|||
|
|
contact: this.contactInfo,
|
|||
|
|
// timestamp: new Date().getTime(),
|
|||
|
|
type:Number(this.selectedCategory) + 1
|
|||
|
|
}
|
|||
|
|
this.$u.post(`/app/complaint/add`,data).then(res =>{
|
|||
|
|
if(res.code == 200){
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '提交成功',
|
|||
|
|
icon: 'success',
|
|||
|
|
duration:3000
|
|||
|
|
})
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
}, 1500)
|
|||
|
|
}else if(res.code == 401){
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url:'/pages/login/login'
|
|||
|
|
})
|
|||
|
|
} else{
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none',
|
|||
|
|
duration:3000
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
::v-deep .u-icon__icon,
|
|||
|
|
::v-deep .u-title{
|
|||
|
|
padding-bottom: 22rpx !important;
|
|||
|
|
}
|
|||
|
|
.page {
|
|||
|
|
background: #fff;
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding-bottom: 200rpx;
|
|||
|
|
}
|
|||
|
|
.content {
|
|||
|
|
padding: 40rpx 30rpx;
|
|||
|
|
}
|
|||
|
|
// 问题分类选择区域
|
|||
|
|
.category-section {
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
.category-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: 20rpx;
|
|||
|
|
.category-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
border: 2rpx solid #E5E5E5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: #F8F8F8;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
&.active {
|
|||
|
|
background: #E2FFF5 !important;
|
|||
|
|
border: 2rpx solid #1EC28B !important;
|
|||
|
|
.category-icon {
|
|||
|
|
.icon {
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.category-text {
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.category-icon {
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
color: #666;
|
|||
|
|
width: 52rpx;
|
|||
|
|
height: 52rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 问题描述区域
|
|||
|
|
.description-section {
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.description-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 230rpx;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
border: 2rpx solid #E5E5E5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
&::placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.char-count {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 16rpx;
|
|||
|
|
right: 24rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 图片上传区域
|
|||
|
|
.image-section {
|
|||
|
|
margin-bottom: 60rpx;
|
|||
|
|
|
|||
|
|
.media-grid {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mediaitem{
|
|||
|
|
position: relative;
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
|
|||
|
|
.media-preview{
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.play-icon{
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn{
|
|||
|
|
position: absolute;
|
|||
|
|
top: -8rpx;
|
|||
|
|
right: -8rpx;
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
background: #ff4757;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.delete-icon{
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
display: block;
|
|||
|
|
.hint {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.upload-btn {
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
border: 2rpx dashed #E5E5E5;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background: #FAFAFA;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.sc {
|
|||
|
|
width: 180rpx;
|
|||
|
|
height: 180rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.image-upload {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
border: 2rpx dashed #E5E5E5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background: #FAFAFA;
|
|||
|
|
.upload-placeholder {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
.plus-icon {
|
|||
|
|
font-size: 80rpx;
|
|||
|
|
color: #CCC;
|
|||
|
|
font-weight: 300;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.uploaded-image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 联系方式区域
|
|||
|
|
.contact-section {
|
|||
|
|
margin-bottom: 80rpx;
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
display: block;
|
|||
|
|
.required {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.contact-input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
border: 2rpx solid #E5E5E5;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
&::placeholder {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 提交按钮区域
|
|||
|
|
.submit-section {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 152rpx;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 0rpx 0rpx 0rpx 0rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
.submit-btn {
|
|||
|
|
width: 670rpx;
|
|||
|
|
height: 86rpx;
|
|||
|
|
margin: auto;
|
|||
|
|
margin-top: 34rpx;
|
|||
|
|
background-color: #1EC28B;
|
|||
|
|
border-radius: 43rpx 43rpx 43rpx 43rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 86rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|