<template>
|
<view class="index">
|
<!-- 接单方 -->
|
<view class="index-j" v-if="typeViewId === 1">
|
<view class="index-j-head">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="index-c-title" :style="{ height: navHeight + 'px' }">
|
<text>近快</text>
|
</view>
|
</view>
|
<view class="search" :style="{ top: statusbarHeight + navHeight + 'px' }">
|
<view class="index-j-cate">
|
<view class="index-j-cate-item">
|
<text>全部</text>
|
<view class="index-j-cate-item-x"></view>
|
</view>
|
<view class="index-j-cate-item">
|
<text>用工</text>
|
</view>
|
<view class="index-j-cate-item">
|
<text>运货</text>
|
</view>
|
<view class="index-j-cate-item">
|
<text>订餐</text>
|
</view>
|
</view>
|
<view class="index-j-search">
|
<view class="index-j-search-item active">最新发布</view>
|
<view class="index-j-search-item">距离优先</view>
|
<view class="index-j-search-item">价格从高到低</view>
|
</view>
|
</view>
|
<view class="index-j-list">
|
<view class="index-list-item">
|
<view class="index-list-item-head">
|
<view class="index-list-item-head-l">
|
<view class="xoam"></view>
|
<text>订餐单</text>
|
</view>
|
<view class="index-list-item-head-r">距离 1.3km</view>
|
</view>
|
<view class="index-list-item-info">
|
午餐5元(30份)|晚餐8元(20份)
|
</view>
|
<view class="index-list-item-dz">
|
<image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
|
<text>长江西路大蜀山森林公园西门保安室</text>
|
</view>
|
<view class="index-list-item-dz">
|
<image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
|
<text>07-26 至 07-27(2天)</text>
|
</view>
|
<view class="index-list-item-price">
|
<text>预估:</text>
|
<text>¥1000.00</text>
|
</view>
|
<view class="eidt">
|
<sunui-mverify @change="mverify"></sunui-mverify>
|
</view>
|
</view>
|
<view class="index-list-item">
|
<view class="index-list-item-head">
|
<view class="index-list-item-head-l">
|
<view class="xoam"></view>
|
<text>运货单-小货车-厢式</text>
|
</view>
|
<view class="index-list-item-head-r">待接单方接单</view>
|
</view>
|
<view class="index-list-item-info">
|
葡萄|20000斤|需2辆
|
</view>
|
<view class="index-list-item-date">
|
<image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
|
<text>07-26 至 07-27(2天)</text>
|
</view>
|
<view class="address">
|
<view class="address-xian"></view>
|
<view class="address-row">
|
<image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
|
<text>长江西路大蜀山森林公园西门保安室</text>
|
</view>
|
<view class="address-row">
|
<image src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image>
|
<text>长江西路大蜀山森林公园东门保安室</text>
|
</view>
|
<view class="address-row">
|
<image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
|
<text>安徽莲花科技产业园豆米科技有限公司</text>
|
</view>
|
</view>
|
<view class="index-list-item-price">
|
<text>预估:</text>
|
<text>¥1000.00</text>
|
</view>
|
<view class="eidt">
|
<sunui-mverify @change="mverify"></sunui-mverify>
|
</view>
|
</view>
|
<view class="index-list-item">
|
<view class="index-list-item-head">
|
<view class="index-list-item-head-l">
|
<view class="xoam"></view>
|
<text>用工单-采摘工</text>
|
</view>
|
<view class="index-list-item-head-r">待接单</view>
|
</view>
|
<view class="index-list-item-info">
|
葡萄|2000斤
|
</view>
|
<view class="index-list-item-dz">
|
<image src="/static/icon/order_ic_location@2x.png" mode="widthFix"></image>
|
<text>长江西路大蜀山森林公园西门保安室</text>
|
</view>
|
<view class="index-list-item-dz">
|
<image src="/static/icon/order_ic_time@2x.png" mode="widthFix"></image>
|
<text>07-26 至 07-27(2天)</text>
|
</view>
|
<view class="index-list-item-price">
|
<text>预估:</text>
|
<text>¥1000.00</text>
|
</view>
|
<view class="eidt">
|
<sunui-mverify @change="mverify"></sunui-mverify>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 发单方 -->
|
<view class="index-c" v-if="typeViewId === 0">
|
<view :style="{ width: '100%', height: statusbarHeight + 'px' }"></view>
|
<view class="index-c-title" :style="{ height: navHeight + 'px' }" @click="selectAddress">
|
<text class="index-c-title-logo">近快</text>
|
<image class="dingwei" src="/static/icon/home_ic_location@2x.png" mode="widthFix"></image>
|
<text>西湖国际广场</text>
|
<image class="qu" src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
|
</view>
|
|
<view class="index-c-cate">
|
<view
|
:class="typeId === item.id ? 'index-c-cate-item active' : 'index-c-cate-item'"
|
v-for="(item, index) in type"
|
:key="index"
|
@click="clickType(item.id)">
|
{{item.name}}
|
</view>
|
</view>
|
|
<template v-if="typeId === 2">
|
<view class="list">
|
<view class="list-item">
|
<view class="list-item-label">时间地点</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">用餐日期<b>*</b></view>
|
<view class="list-item-row-val">
|
<text>请选择</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">用餐时间<b>*</b></view>
|
<view class="list-item-row-radio">
|
<view class="radio-item">
|
<view class="radio-item-label">早餐</view>
|
<view class="radio-item-list">
|
<view class="radio-item-list-l">
|
<view class="radio-item-list-item active">5元</view>
|
<view class="radio-item-list-item">8元</view>
|
<view class="radio-item-list-item">10元</view>
|
</view>
|
<view class="radio-item-list-data">
|
<text>份数:</text>
|
<input type="number" placeholder="0">
|
<text style="color: #999999;">份</text>
|
</view>
|
</view>
|
</view>
|
<view class="radio-item">
|
<view class="radio-item-label">午餐</view>
|
<view class="radio-item-list">
|
<view class="radio-item-list-l">
|
<view class="radio-item-list-item active">5元</view>
|
<view class="radio-item-list-item">8元</view>
|
<view class="radio-item-list-item">10元</view>
|
</view>
|
<view class="radio-item-list-data">
|
<text>份数:</text>
|
<input type="number" placeholder="0">
|
<text style="color: #999999;">份</text>
|
</view>
|
</view>
|
</view>
|
<view class="radio-item">
|
<view class="radio-item-label">晚餐</view>
|
<view class="radio-item-list">
|
<view class="radio-item-list-l">
|
<view class="radio-item-list-item active">5元</view>
|
<view class="radio-item-list-item">8元</view>
|
<view class="radio-item-list-item">10元</view>
|
</view>
|
<view class="radio-item-list-data">
|
<text>份数:</text>
|
<input type="number" placeholder="0">
|
<text style="color: #999999;">份</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">用餐地点<b>*</b></view>
|
<view class="list-item-row-val">
|
<text>请选择</text>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">地点描述</view>
|
<view class="list-item-row-val">
|
<input type="text" placeholder="请输入" />
|
</view>
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">需求</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">用餐人数<b>*</b></view>
|
<view class="list-item-row-user">
|
<view class="user-item">
|
<text>早餐</text>
|
<input type="text" placeholder="请输入" />
|
<text>份</text>
|
</view>
|
<view class="user-item">
|
<text>午餐</text>
|
<input type="text" placeholder="请输入" />
|
<text>份</text>
|
</view>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">需求补充</view>
|
<view class="list-item-row-val">
|
<textarea cols="30" rows="10" placeholder="请输入" maxlength="200"></textarea>
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">图片</view>
|
<view class="list-item-row-upload">
|
<view class="upload-item">
|
<image src="/static/logo.png" mode="widthFix"></image>
|
</view>
|
<view class="upload-item">
|
<u-icon name="plus" color="#999999" size="24"></u-icon>
|
<text>点击上传</text>
|
</view>
|
</view>
|
</view>
|
<view class="list-item-zk">
|
<text>补充需求</text>
|
<u-icon name="arrow-down" color="#00BC12" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="list-item">
|
<view class="list-item-label">联系人信息</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">联系人</view>
|
<view class="list-item-row-val">
|
<input type="text" placeholder="请输入" />
|
</view>
|
</view>
|
<view class="list-item-row">
|
<view class="list-item-row-label">联系电话<b>*</b></view>
|
<view class="list-item-row-val">
|
<input type="number" placeholder="请输入" maxlength="11" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<view style="width: 100%; height: 214rpx;"></view>
|
<view class="footer">
|
<view class="footer-price">
|
<view class="footer-price-info">预估总费用</view>
|
<view class="footer-price-num">
|
<text>0</text>
|
<text>元</text>
|
</view>
|
</view>
|
<view class="footer-bottom">
|
<view class="footer-bottom-kf">
|
<image src="/static/logo.png" mode="widthFix"></image>
|
<text>客服</text>
|
</view>
|
<div class="footer-bottom-btn">
|
<text>立即下单</text>
|
<text>(服务完成后付款)</text>
|
</div>
|
</view>
|
</view>
|
</template>
|
|
<view class="box" v-if="typeId !== 2">
|
<view class="box-hz" :style="{ minHeight: 'calc(100vh - env(safe-area-inset-bottom) - 94rpx - ' + ((navHeight + statusbarHeight) + 'px') + ')' }">
|
|
<!-- 用工 -->
|
<template v-if="typeId === 0">
|
<view class="box-hz-cate">
|
<view :class="form.workType === item.id ? 'box-hz-cate-item active' : 'box-hz-cate-item'" v-for="(item, index) in typeWork" :key="index" @click="clickTypeWork(item.id)">
|
<text>{{item.name}}</text>
|
<view class="box-hz-cate-item-x" v-if="form.workType === item.id"></view>
|
</view>
|
</view>
|
<view class="box-hz-list">
|
<view class="box-hz-list-item" @click="show = true">
|
<view class="box-hz-list-item-label"><text>用工时间:</text></view>
|
<view :class="form.startDate ? 'box-hz-list-item-val active' : 'box-hz-list-item-val'">
|
<view class="box-hz-list-item-val-left">
|
<image class="icon" src="/static/icon/ic_time@2x.png" mode="widthFix"></image>
|
<text>{{ form.startDate ? form.startDate + ' 至 ' + form.endDate : '请选择用工时间'}}</text>
|
</view>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
<view class="box-hz-list-item" @click="selectAddress(1)">
|
<view class="box-hz-list-item-label"><text>用工地点:</text></view>
|
<view :class="form.address ? 'box-hz-list-item-val active' :'box-hz-list-item-val'">
|
<view class="box-hz-list-item-val-left">
|
<image class="icon" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
|
<text>{{form.address ? form.address : '请选择用工地点'}}</text>
|
</view>
|
<u-icon name="arrow-right" color="#111111" size="16"></u-icon>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<!-- 运货 -->
|
<template v-if="typeId === 1">
|
<view class="box-hz-cate">
|
<view :class="carId === item.id ? 'box-hz-cate-item active' : 'box-hz-cate-item'" v-for="(item, index) in car" :key="index" @click="clickCar(item.id)">
|
<text>{{item.name}}</text>
|
<view class="box-hz-cate-item-x" v-if="carId === item.id"></view>
|
</view>
|
</view>
|
<view class="box-hz-car">
|
<view class="box-hz-car-image">
|
<image src="/static/image/ic_sanlunche@2x.png" mode="widthFix" v-if="carId === 1"></image>
|
<image src="/static/image/ic_xiaohuoche@2x.png" mode="widthFix" v-else-if="carId === 2"></image>
|
</view>
|
<view class="box-hz-car-info" v-if="carId === 1">
|
厢长3.8~4.0米 载重1.5~2.0吨 载方12.3~18.4方
|
</view>
|
<view class="box-hz-car-info" v-else-if="carId === 2">
|
厢长3.8~4.0米 载重1.5~2.0吨 载方12.3~18.4方
|
</view>
|
</view>
|
<view class="box-hz-list">
|
<view class="box-hz-list-item">
|
<view class="box-hz-list-item-label"><text>用车时间:</text></view>
|
<view class="box-hz-list-item-val">
|
<view class="box-hz-list-item-val-left">
|
<image class="icon" src="/static/icon/ic_time@2x.png" mode="widthFix"></image>
|
<text>请选择用车时间</text>
|
</view>
|
<image class="icon1" src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="box-hz-list-item">
|
<view class="box-hz-list-item-label">
|
<text>用车时间:</text>
|
<text>+增加途经点</text>
|
</view>
|
<view class="item-d">
|
<view class="item-d-row">
|
<view class="item-d-row-icon">
|
<image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="item-d-row-val">
|
<text>请选择用车起点</text>
|
<image src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="item-d-row">
|
<view class="item-d-row-icon">
|
<image src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="item-d-row-val">
|
<text style="color: #999999;">请选择途经地点</text>
|
<image src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="item-d-row">
|
<view class="item-d-row-icon">
|
<image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="item-d-row-val">
|
<text>请选择用车终点</text>
|
<image src="/static/icon/home_ar_next@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<view class="box-hz-btn" :style="{ backgroundImage: 'url(' + btn + ')' }">
|
<view class="box-hz-btn-kf">客服</view>
|
<view class="box-hz-btn-next" @click="jump()">下一步</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 选择日期范围 -->
|
<u-calendar :show="show" color="#00BC12" mode="range" @close="show = false" @confirm="confirmDate"></u-calendar>
|
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import sunuiMverify from '@/components/sunui-mverify/sunui-mverify.vue';
|
export default {
|
components: { sunuiMverify },
|
computed: {
|
...mapState(['navHeight', 'statusbarHeight','userInfo','token','openid'])
|
},
|
onShow(options){
|
this.typeViewId = 0
|
if(this.token &&this.token!='' && this.userInfo && JSON.stringify(this.userInfo) != '{}'){
|
this.isLogin=true
|
}
|
if (this.userInfo && this.userInfo.useIdentity == 1) {
|
this.typeViewId = 1
|
}
|
},
|
data() {
|
return {
|
show: false,
|
isLogin: false,
|
typeId: 0,
|
carId: 1,
|
type: [
|
{ name: '用工', id: 0 },
|
{ name: '运货', id: 1 },
|
{ name: '订餐', id: 2 }
|
],
|
typeWork: [
|
{ name: '采摘工', id: 0 },
|
{ name: '分拣工', id: 1 },
|
{ name: '包装工', id: 2 }
|
],
|
car: [
|
{ name: '三轮车', id: 1 },
|
{ name: '小货车', id: 2 }
|
],
|
btn: require('@/static/image/btn.png'),
|
typeViewId: 0,
|
|
form: {
|
startDate: '',
|
endDate: '',
|
latitude: '',
|
longitude: '',
|
address: '',
|
workType: 0,
|
days: ''
|
}
|
}
|
},
|
methods: {
|
confirmDate(e) {
|
this.form.startDate = e[0]
|
this.form.endDate = e[e.length - 1]
|
this.form.days = e.length;
|
this.show = false
|
},
|
selectAddress(type) {
|
uni.chooseLocation({
|
success: (res) => {
|
if (type === 1) {
|
this.form.latitude = res.latitude
|
this.form.longitude = res.longitude
|
this.form.address = res.address
|
}
|
}
|
});
|
// uni.getLocation({
|
// type: 'gcj02',
|
// success: function (res) {
|
// console.log(res)
|
// }
|
// });
|
},
|
clickType(e) {
|
this.typeId = e
|
},
|
clickTypeWork(e) {
|
this.form.workType = e
|
},
|
clickCar(e) {
|
this.carId = e
|
},
|
jump() {
|
if(!this.userInfo || !this.token){
|
uni.navigateTo({
|
url: '/pages/login/login'
|
})
|
return
|
}
|
|
const { form } = this;
|
|
if (!form.startDate || !form.endDate) {
|
return uni.showToast({ title: '请选择用工时间', icon: 'none' })
|
} else if (!form.latitude || !form.longitude) {
|
return uni.showToast({ title: '请选择用工地点', icon: 'none' })
|
}
|
|
// 采摘工
|
if (this.form.workType === 0) {
|
uni.navigateTo({
|
url: `/pages/using-workers/using-workers?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
|
})
|
// 分拣工
|
} else if (this.form.workType === 1) {
|
uni.navigateTo({
|
url: `/pages/sorting/sorting?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
|
})
|
// 包装工
|
} else if (this.form.workType === 2) {
|
uni.navigateTo({
|
url: `/pages/packaging-worker/packaging-worker?days=${form.days}&startDate=${form.startDate}&endDate=${form.endDate}&latitude=${form.latitude}&longitude=${form.longitude}&address=${form.address}&workType=${form.workType}`
|
})
|
}
|
},
|
mverify(e){
|
console.log('验证结果:',e);
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #F7F7F7;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.index {
|
width: 100%;
|
.index-j {
|
width: 100%;
|
.index-j-head {
|
width: 100%;
|
background-color: #ffffff;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 999;
|
.index-c-title {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
text {
|
font-weight: bold;
|
font-size: 36rpx;
|
color: #111111;
|
}
|
}
|
}
|
.search {
|
width: 100%;
|
position: sticky;
|
left: 0;
|
z-index: 999;
|
.index-j-cate {
|
width: 100%;
|
height: 110rpx;
|
display: flex;
|
background-color: #ffffff;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
.index-j-cate-item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
text {
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #666666;
|
}
|
.index-j-cate-item-x {
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
width: 40rpx;
|
height: 6rpx;
|
background: #00BC12;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
.index-j-search {
|
width: 100%;
|
height: 96rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
.active {
|
background: rgba(91,190,56,0.08) !important;
|
font-weight: 400 !important;
|
font-size: 26rpx !important;
|
color: #4DB02B !important;
|
}
|
.index-j-search-item {
|
padding: 10rpx 20rpx;
|
box-sizing: border-box;
|
background: #F7F7F7;
|
border-radius: 28rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
margin-right: 24rpx;
|
}
|
}
|
}
|
.index-j-list {
|
width: 100%;
|
padding: 24rpx 30rpx;
|
box-sizing: border-box;
|
.index-list-item {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #FFFFFF;
|
border-radius: 20rpx;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.eidt {
|
width: 100%;
|
height: 100rpx;
|
padding: 6rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// background: #00BC12;
|
// border-radius: 50rpx;
|
// text {
|
// font-weight: 500;
|
// font-size: 36rpx;
|
// color: #FFFFFF;
|
// }
|
}
|
.index-list-item-price {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
}
|
&:nth-child(2) {
|
font-weight: 600;
|
font-size: 36rpx;
|
color: #FF0000;
|
}
|
}
|
}
|
.index-list-item-dz {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
image {
|
width: 32rpx;
|
height: 32rpx;
|
flex-shrink: 0;
|
margin-right: 16rpx;
|
}
|
text {
|
flex: 1;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
.index-list-item-info {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #888888;
|
margin-bottom: 20rpx;
|
}
|
.address {
|
width: 100%;
|
background: #F7F7F7;
|
border-radius: 16rpx;
|
padding: 30rpx;
|
box-sizing: border-box;
|
margin-bottom: 24rpx;
|
position: relative;
|
.address-xian {
|
position: absolute;
|
top: 17px;
|
left: 24px;
|
width: 1rpx;
|
height: calc(100% - 60rpx);
|
border-right: 2rpx dashed #B2B2B2;
|
}
|
.address-row {
|
position: relative;
|
z-index: 2;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
margin-right: 24rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
}
|
.index-list-item-date {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
image {
|
flex-shrink: 0;
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 18rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #333333;
|
}
|
}
|
.index-list-item-head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 20rpx;
|
.index-list-item-head-l {
|
display: flex;
|
align-items: center;
|
.xoam {
|
width: 6rpx;
|
height: 30rpx;
|
background: #00BC12;
|
border-radius: 4rpx;
|
margin-right: 20rpx;
|
}
|
text {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
.index-list-item-head-r {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #888888;
|
}
|
}
|
}
|
}
|
}
|
.index-c {
|
width: 100%;
|
height: 520rpx;
|
background: linear-gradient(#00BC12 0%, #00BC12 83%, #ffffff 100%);
|
.index-c-title {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
.index-c-title-logo {
|
font-weight: bold;
|
font-size: 40rpx;
|
color: #FFFFFF;
|
margin-right: 30rpx;
|
}
|
.dingwei {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 8rpx;
|
}
|
text {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #ffffff;
|
margin-right: 12rpx;
|
}
|
.qu {
|
width: 22rpx;
|
height: 22rpx;
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
padding: 0 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
flex-direction: column;
|
margin-top: 26rpx;
|
.list-item {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
border-radius: 20rpx;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list-item-label {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
margin-bottom: 28rpx;
|
}
|
.list-item-zk {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
text {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #00BC12;
|
margin-right: 8rpx;
|
}
|
}
|
.list-item-row {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
border-bottom: 1rpx solid #E5E5E5;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.list-item-row-label {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
display: flex;
|
align-items: center;
|
b {
|
color: red;
|
}
|
}
|
.list-item-row-user {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.user-item {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
&:last-child {
|
margin: 0 !important;
|
}
|
text {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
input {
|
flex: 1;
|
text-align: center;
|
margin: 0 30rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
.list-item-row-radio {
|
width: 100%;
|
display: flex;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
flex-direction: column;
|
border-bottom: 1rpx solid #E5E5E5;
|
.radio-item {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
.radio-item-label {
|
width: 200rpx;
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
.radio-item-list {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.radio-item-list-l {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
.active {
|
background: #00BC12 !important;
|
color: #ffffff !important;
|
}
|
.radio-item-list-item {
|
width: 124rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #EEEEEE;
|
border-radius: 36rpx;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #111111;
|
margin-right: 30rpx;
|
&:last-child {
|
margin: 0 !important;
|
}
|
}
|
}
|
.radio-item-list-data {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
margin-top: 42rpx;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #333333;
|
}
|
input {
|
width: 100rpx;
|
font-weight: bold;
|
font-size: 30rpx;
|
color: #222222;
|
text-align: right;
|
margin: 0 30rpx;
|
}
|
}
|
}
|
}
|
}
|
.list-item-row-upload {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
.upload-item {
|
width: 156rpx;
|
height: 156rpx;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: center;
|
background: #F8F9FB;
|
border-radius: 8rpx;
|
margin-right: 20rpx;
|
border: 2rpx solid #EEEEEE;
|
&:last-child {
|
margin: 0 !important;
|
}
|
image {
|
width: 100%;
|
}
|
text {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
margin-top: 16rpx;
|
}
|
}
|
}
|
.list-item-row-val {
|
width: 100%;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
input {
|
width: 100%;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
textarea {
|
width: 100%;
|
height: 90rpx;
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
.index-c-cate {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 28rpx;
|
.active {
|
background: #FFFFFF !important;
|
color: #5BBE38 !important;
|
}
|
.index-c-cate-item {
|
width: 128rpx;
|
height: 64rpx;
|
line-height: 64rpx;
|
text-align: center;
|
border-radius: 32rpx;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
.footer {
|
width: 100%;
|
height: 214rpx;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
z-index: 9;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
background: #FFFFFF;
|
box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(0,0,0,0.06);
|
.footer-price {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.footer-price-info {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
.footer-price-num {
|
display: flex;
|
align-items: center;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 40rpx;
|
color: #FF0000;
|
margin-right: 20rpx;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.footer-bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.footer-bottom-kf {
|
flex-shrink: 0;
|
margin-right: 40rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 36rpx;
|
height: 36rpx;
|
}
|
text {
|
font-weight: 400;
|
font-size: 24rpx;
|
color: #222222;
|
margin-top: 8rpx;
|
}
|
}
|
.footer-bottom-btn {
|
flex: 1;
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
background: #00BC12;
|
box-shadow: 0rpx 8rpx 12rpx 0rpx rgba(91,190,56,0.16);
|
border-radius: 44rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
&:nth-child(2) {
|
font-weight: 500;
|
font-size: 26rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
.box {
|
width: 100%;
|
padding: 0 30rpx 30rpx 30rpx;
|
box-sizing: border-box;
|
margin-top: 30rpx;
|
.box-hz {
|
width: 100%;
|
padding: 40rpx 30rpx;
|
border-radius: 20rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
.box-hz-car {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
margin-top: 24rpx;
|
margin-bottom: 40rpx;
|
.box-hz-car-image {
|
width: 432rpx;
|
height: 200rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.box-hz-car-info {
|
width: 100%;
|
padding: 24rpx;
|
box-sizing: border-box;
|
background: #F7F7F7;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #666666;
|
border-radius: 16rpx;
|
margin-top: 30rpx;
|
}
|
}
|
.box-hz-cate {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 50rpx;
|
.active {
|
text {
|
font-weight: 600 !important;
|
font-size: 32rpx !important;
|
color: #222222 !important;
|
}
|
}
|
.box-hz-cate-item {
|
position: relative;
|
margin-right: 60rpx;
|
text {
|
font-weight: 400;
|
font-size: 30rpx;
|
color: #666666;
|
}
|
.box-hz-cate-item-x {
|
width: 40rpx;
|
height: 6rpx;
|
position: absolute;
|
bottom: -10rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
background: #FF5A40;
|
border-radius: 3rpx;
|
}
|
}
|
}
|
.box-hz-list {
|
width: 100%;
|
.box-hz-list-item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 40rpx;
|
.item-d {
|
width: 100%;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background: #FFFCF9;
|
border-radius: 16rpx;
|
border: 2rpx solid #FD9E24;
|
.item-d-row {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.item-d-row-icon {
|
width: 36rpx;
|
height: 36rpx;
|
flex-shrink: 0;
|
margin-right: 24rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.item-d-row-val {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
border-bottom: 1rpx solid #E5E5E5;
|
text {
|
flex: 1;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
image {
|
flex-shrink: 0;
|
width: 30rpx;
|
height: 30rpx;
|
}
|
}
|
}
|
}
|
.box-hz-list-item-label {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 30rpx;
|
text {
|
&:nth-child(1) {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #666666;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #5BBE38;
|
}
|
}
|
}
|
.active {
|
background: rgba(91,190,56,0.06) !important;
|
border: 2rpx solid #5BBE38 !important;
|
}
|
.box-hz-list-item-val {
|
width: 100%;
|
height: 104rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
background: #FFFCF9;
|
border-radius: 16rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
border: 2rpx solid #FD9E24;
|
.box-hz-list-item-val-left {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
.icon {
|
width: 36rpx;
|
height: 36rpx;
|
margin-right: 24rpx;
|
flex-shrink: 0;
|
}
|
text {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
font-weight: 400;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
}
|
}
|
}
|
}
|
.list {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.list-label {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
.box-hz-btn {
|
width: 100%;
|
height: 88rpx;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.box-hz-btn-kf {
|
flex-shrink: 0;
|
width: 188rpx;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #8B2300;
|
}
|
.box-hz-btn-next {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|