Skip to content

W
weChatFlowApprove
Commit 0015db3b authored by chuan.liu's avatar chuan.liu
Browse files
Options

新增三个流程页面

parent 1d506804
Show whitespace changes
Inline Side-by-side
Showing with 1105 additions and 6 deletions
src/assets/styles/reset.css
View file @ 0015db3b
......@@ -157,6 +157,10 @@ i{
display: inline-block;
}
span{
display: inline-block;
}
.border-bottom{
border-bottom: 1px solid #EAEAEA;
}
src/main.js
View file @ 0015db3b
......@@ -5,11 +5,34 @@ import router from './router'
import './assets/styles/reset.css'
import App from './App.vue'
import { Button, NavBar } from 'vant'
import {
Button,
NavBar,
Cell,
Step,
Steps,
Collapse,
CollapseItem,
Field,
CellGroup,
Picker,
Popup
} from 'vant'
const app = createApp(App)
app.use(store)
app.use(router)
app.use(Button).use(NavBar)
app
.use(Button)
.use(NavBar)
.use(Cell)
.use(Step)
.use(Steps)
.use(Collapse)
.use(CollapseItem)
.use(Field)
.use(CellGroup)
.use(Picker)
.use(Popup)
app.mount('#app')
src/router/index.js
View file @ 0015db3b
......@@ -10,6 +10,21 @@ export const globalRouter = [
path: '/month-flow',
name: 'MonthFlow',
component: () => import('@/views/month-flow/monthFlow.vue')
},
{
path: '/plan-change-flow',
name: 'PlanChangeFlow',
component: () => import('@/views/plan-change-flow/PlanChangeFlow.vue')
},
{
path: '/ship-approval',
name: 'ShipApproval',
component: () => import('@/views/ship-approval/ShipApproval.vue')
},
{
path: '/invoice-occupancy-detail',
name: 'InvoiceOccupancyDetail',
component: () => import('@/views/invoice-occupancy-detail/InvoiceOccupancyDetail.vue')
}
]
......
src/views/invoice-occupancy-detail/InvoiceOccupancyDetail.vue 0 → 100644
View file @ 0015db3b
<template>
<div class="lists">
<van-nav-bar class="status_bar" title="发票占用明细" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="block">
<div class="top-block">
<van-cell title="开票客户" value="步步高有限公司" />
<van-cell title="发货计划类型" value="新品五粮液6X6X6 500ML" />
<van-cell title="发票号" value="0090000578(计划内）" />
<van-cell title="开票日期" value="步步高商贸有限公司" />
<van-cell title="开票量" value="配额酒制票通知单(计划内）" />
<van-cell title="本次占用量" value="专卖店渠道" />
<van-cell title="剩余量" value="2022" />
</div>
</div>
<div class="block">
<div class="top-block">
<van-cell title="开票客户" value="步步高有限公司" />
<van-cell title="发货计划类型" value="新品五粮液6X6X6 500ML" />
<van-cell title="发票号" value="0090000578(计划内）" />
<van-cell title="开票日期" value="步步高商贸有限公司" />
<van-cell title="开票量" value="配额酒制票通知单(计划内）" />
<van-cell title="本次占用量" value="专卖店渠道" />
<van-cell title="剩余量" value="2022" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
onClickLeft() {
this.$router.go(-1)
}
}
}
</script>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
margin-top: -48px;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
height: calc(100vh - 50px);
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
display: flex;
flex-direction: column;
overflow-y: scroll;
.block {
background-color: #fff;
padding: 20px;
border-radius: 8px;
margin-bottom: 8px;
}
.form-block {
padding-bottom: 0;
padding-top: 0;
}
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.2;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
}
</style>
src/views/month-flow/monthFlow.vue
View file @ 0015db3b
<template>
<div>
<van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
<div class="lists">
<van-nav-bar class="status_bar" title="月度发货计划审批" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="top-block">
<van-cell title="申请时间" value="2022.06.22 17:05:28" />
<van-cell title="录入人" value="苏州新川商贸公司" />
<van-cell title="计划年度" value="2022" />
<van-cell title="备注" value="共15家客户，应市场变化调整发货计划" />
</div>
<van-button class="download-btn" :icon="downloadIcon" type="primary">
发货计划下载
</van-button>
<van-collapse class="step-block" v-model="activeNames" :border="false">
<van-collapse-item title="审批" name="1" :border="false">
<van-steps
direction="vertical"
:active="1"
active-color="#FF1D32"
inactive-color="#999"
>
<van-step>
<template #active-icon>
<span class="active-dot">1</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">1</span>
</template>
<template #finish-icon>
<span class="active-dot">1</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot">2</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">2</span>
</template>
<template #finish-icon>
<span class="active-dot">2</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot"></span>
</template>
<template #inactive-icon>
<span class="inactive-dot"></span>
</template>
<template #finish-icon>
<span class="active-dot"></span>
</template>
</van-step>
</van-steps>
</van-collapse-item>
</van-collapse>
<div class="remark-block">
<span class="title">意见</span>
<textarea class="text" type="textarea" rows="2" />
</div>
</div>
</div>
<p class="bottom-block"></p>
<div class="bottom">
<van-button plain type="primary">驳回</van-button>
<van-button plain type="primary">通过</van-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {}
return {
activeNames: ['1'],
downloadIcon: require('@/assets/images/download@3x.png')
}
},
methods: {
onClickLeft() {}
}
}
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
// height: 142px;
margin-top: -48px;
// background: url(~@/assets/images/nav_bg@3x.png) no-repeat;
// background-size: cover;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 20px;
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.5;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
.download-btn {
width: 160px;
height: 30px;
font-size: 12px;
border-radius: 16px;
color: #ff1d32;
background-color: #fff;
border-color: #ff1d32;
margin: 24px 0;
}
:deep(.step-block) {
margin-bottom: 24px;
.van-collapse-item {
.van-cell {
padding: 0;
}
.van-collapse-item__wrapper {
.van-collapse-item__content {
padding: 0;
}
}
}
.van-steps {
padding-bottom: 10px;
.van-steps__items {
.van-step {
&::after {
display: none;
}
.van-step__title {
margin-left: 20px;
.step-title {
font-size: 17px;
color: #333;
margin-bottom: 6px;
}
.step-title2 {
font-size: 15px;
color: #999;
}
}
}
.van-step__circle-container {
.active-dot {
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
background: #ff1d32;
border-radius: 50%;
color: #fff;
font-size: 14px;
}
.inactive-dot {
width: 8px;
height: 8px;
background: #e5e5e5;
border-radius: 50%;
}
}
}
}
}
.remark-block {
display: flex;
flex-direction: column;
.title {
font-size: 14px;
color: #999;
margin-bottom: 12px;
}
.text {
width: 311px;
height: 91px;
background: #f5f6f7;
border-radius: 4px;
appearance: none;
border: none;
padding: 8px 14px;
}
}
.bottom-block {
width: 100%;
height: 71px;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 71px;
background: #ffffff;
padding: 0 16px;
.van-button {
height: 42px;
border: 1px solid #ff1d32;
border-radius: 22px;
color: #fff;
font-size: 14px;
background-color: #ff1d32;
flex: 1;
&:first-child {
margin-right: 15px;
background-color: #fff;
color: #ff1d32;
}
}
}
}
</style>
src/views/plan-change-flow/planChangeFlow.vue
View file @ 0015db3b
<template>
<div class="lists">
<van-nav-bar class="status_bar" title="发货计划变更审批" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="top-block">
<van-cell title="申请时间" value="2022.06.22 17:05:28" />
<van-cell title="录入人" value="苏州新川商贸公司" />
<van-cell title="备注" value="共15家客户，应市场变化调整发货计划" />
</div>
<van-button class="download-btn" :icon="downloadIcon" type="primary">
变更发货计划下载
</van-button>
<van-collapse class="step-block" v-model="activeNames" :border="false">
<van-collapse-item title="审批" name="1" :border="false">
<van-steps
direction="vertical"
:active="1"
active-color="#FF1D32"
inactive-color="#999"
>
<van-step>
<template #active-icon>
<span class="active-dot">1</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">1</span>
</template>
<template #finish-icon>
<span class="active-dot">1</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot">2</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">2</span>
</template>
<template #finish-icon>
<span class="active-dot">2</span>
</template>
<p class="step-title">同意</p>
<p class="step-title2">战总 四川战区</p>
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot"></span>
</template>
<template #inactive-icon>
<span class="inactive-dot"></span>
</template>
<template #finish-icon>
<span class="active-dot"></span>
</template>
</van-step>
</van-steps>
</van-collapse-item>
</van-collapse>
<div class="remark-block">
<span class="title">意见</span>
<textarea class="text" type="textarea" rows="2" />
</div>
</div>
</div>
<p class="bottom-block"></p>
<div class="bottom">
<van-button plain type="primary">驳回</van-button>
<van-button plain type="primary">通过</van-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'],
downloadIcon: require('@/assets/images/download@3x.png')
}
},
methods: {
onClickLeft() {}
}
}
</script>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
// height: 142px;
margin-top: -48px;
// background: url(~@/assets/images/nav_bg@3x.png) no-repeat;
// background-size: cover;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 20px;
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.5;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
.download-btn {
width: 160px;
height: 30px;
font-size: 12px;
border-radius: 16px;
color: #ff1d32;
background-color: #fff;
border-color: #ff1d32;
margin: 24px 0;
}
:deep(.step-block) {
margin-bottom: 24px;
.van-collapse-item {
.van-cell {
padding: 0;
}
.van-collapse-item__wrapper {
.van-collapse-item__content {
padding: 0;
}
}
}
.van-steps {
padding-bottom: 10px;
.van-steps__items {
.van-step {
&::after {
display: none;
}
.van-step__title {
margin-left: 20px;
.step-title {
font-size: 17px;
color: #333;
margin-bottom: 6px;
}
.step-title2 {
font-size: 15px;
color: #999;
}
}
}
.van-step__circle-container {
.active-dot {
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
background: #ff1d32;
border-radius: 50%;
color: #fff;
font-size: 14px;
}
.inactive-dot {
width: 8px;
height: 8px;
background: #e5e5e5;
border-radius: 50%;
}
}
}
}
}
.remark-block {
display: flex;
flex-direction: column;
.title {
font-size: 14px;
color: #999;
margin-bottom: 12px;
}
.text {
width: 311px;
height: 91px;
background: #f5f6f7;
border-radius: 4px;
appearance: none;
border: none;
padding: 8px 14px;
}
}
.bottom-block {
width: 100%;
height: 71px;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 71px;
background: #ffffff;
padding: 0 16px;
.van-button {
height: 42px;
border: 1px solid #ff1d32;
border-radius: 22px;
color: #fff;
font-size: 14px;
background-color: #ff1d32;
flex: 1;
&:first-child {
margin-right: 15px;
background-color: #fff;
color: #ff1d32;
}
}
}
}
</style>
src/views/ship-approval/ShipApproval.vue 0 → 100644
View file @ 0015db3b
<template>
<div class="lists">
<van-nav-bar class="status_bar" title="发货审批" left-arrow @click-left="onClickLeft" />
<div class="header-bg"><img class="header-bg-img" src="@/assets/images/nav_bg@3x.png" /></div>
<div class="main">
<div class="list-wrapper">
<div class="block">
<div class="top-block">
<van-cell title="发运单号" value="DH3547437778" />
<van-cell title="发货计划类型" value="发货计划" />
<van-cell title="制票类型" value="配额酒制票通知单(计划内）" />
<van-cell title="开票客户" value="步步高商贸有限公司" />
<van-cell title="订单客户" value="配额酒制票通知单(计划内）" />
<van-cell title="渠道类型" value="专卖店渠道" />
<van-cell title="年度" value="2022" />
</div>
<div class="top-block top-detail-block">
<van-cell title="产品类别" value="1618五粮液" />
<van-cell title="产品描述" value="五粮液.1618(091) 52% 500ML*6" />
<van-cell title="未发货件数" value="7" />
<van-cell title="本月计划剩余数" value="220" />
<van-cell title="本次要货件数" value="7" />
</div>
<van-button
class="download-btn"
icon-position="right"
:icon="downloadIcon"
@click="checkDetail()"
type="primary"
>
查看发票占用情况
</van-button>
</div>
<div class="block form-block">
<van-cell-group>
<van-field v-model="form.username" label="基地审批量" placeholder="" />
<van-field v-model="form.username" label="战区审批量" placeholder="" error-message="" />
<van-field
v-model="form.username"
required
label="内勤审批量"
placeholder=""
error-message=""
/>
</van-cell-group>
</div>
<div class="block form-block">
<van-cell-group>
<van-field v-model="form.username" label="卖场简称" placeholder="" />
<van-field v-model="form.username" label="卖场全称" placeholder="" error-message="" />
<van-field v-model="form.username" label="卖场区域" placeholder="" error-message="" />
</van-cell-group>
</div>
<div class="block form-block">
<van-cell-group>
<van-field v-model="form.username" label="是否分流" placeholder="" />
<van-field v-model="form.username" label="分流经销商" placeholder="" error-message="" />
<van-field v-model="form.username" label="分流经渠道" placeholder="" error-message="" />
</van-cell-group>
</div>
<div class="block form-block">
<van-cell-group>
<van-field v-model="form.username" label="分流收货单位" placeholder="" />
<van-field v-model="form.username" label="收货单位" placeholder="" error-message="" />
<van-field v-model="form.username" label="喷码单位" placeholder="" error-message="" />
<van-field v-model="form.username" label="收货联系人" placeholder="" />
</van-cell-group>
</div>
<div class="block form-block">
<van-cell-group>
<van-field v-model="form.username" label="联系人电话" placeholder="" />
<van-field v-model="form.username" label="收货地址" placeholder="" error-message="" />
<van-field v-model="form.username" label="是否自提" placeholder="" error-message="" />
<van-field v-model="form.username" label="备注" placeholder="" />
</van-cell-group>
</div>
<div class="block">
<van-collapse class="step-block" v-model="activeNames" :border="false">
<van-collapse-item title="审批" name="1" :border="false">
<van-steps
direction="vertical"
:active="1"
active-color="#FF1D32"
inactive-color="#999"
>
<van-step>
<template #active-icon>
<span class="active-dot">1</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">1</span>
</template>
<template #finish-icon>
<span class="active-dot">1</span>
</template>
<p class="step-title">2022.1.25 09:30 步步高提交</p>
<!-- <p class="step-title2">战总 四川战区</p> -->
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot">2</span>
</template>
<template #inactive-icon>
<span class="inactive-dot">2</span>
</template>
<template #finish-icon>
<span class="active-dot">2</span>
</template>
<p class="step-title">同意，2022.1.26 10:25 渠道经理-王宇</p>
<!-- <p class="step-title2">战总 四川战区</p> -->
</van-step>
<van-step>
<template #active-icon>
<span class="active-dot"></span>
</template>
<template #inactive-icon>
<span class="inactive-dot"></span>
</template>
<template #finish-icon>
<span class="active-dot"></span>
</template>
</van-step>
</van-steps>
</van-collapse-item>
</van-collapse>
<div class="approval-block">
<span class="title">审批结果</span>
<van-field
v-model="pickerVal"
is-link
readonly
label=""
placeholder=""
@click="showPicker = true"
/>
</div>
<div class="remark-block">
<span class="title">审批意见</span>
<textarea class="text" type="textarea" rows="2" />
</div>
</div>
<div class="bottom-block">.</div>
</div>
</div>
<div class="bottom">
<!-- <van-button plain type="primary">确认</van-button> -->
<van-button plain type="primary">确认</van-button>
</div>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
</van-popup>
</div>
</template>
<script>
export default {
data() {
return {
activeNames: ['1'],
downloadIcon: require('@/assets/images/arrow_r@3x.png'),
form: {
username: ''
},
showPicker: false,
columns: ['不同意', '同意'],
pickerVal: '',
pickerValIndex: 0
}
},
methods: {
onClickLeft() {},
onConfirm(value, index) {
this.pickerVal = value
this.pickerValIndex = index
this.showPicker = false
},
checkDetail() {
this.$router.push({ name: 'InvoiceOccupancyDetail' })
}
}
}
</script>
<style scoped lang="scss">
.lists {
height: 100%;
display: flex;
position: relative;
flex-direction: column;
background: #f0f4f5;
overflow: hidden;
:deep(.status_bar) {
background: transparent;
.van-nav-bar__arrow {
color: #333;
}
}
.header-bg {
width: 100%;
// height: 142px;
margin-top: -48px;
// background: url(~@/assets/images/nav_bg@3x.png) no-repeat;
// background-size: cover;
.header-bg-img {
width: 100%;
}
}
.main {
display: flex;
position: absolute;
width: 100%;
height: calc(100vh - 71px - 50px);
top: 48px;
left: 0;
flex-direction: column;
padding: 0 8px;
overflow: hidden;
border-radius: 8px;
.list-wrapper {
display: flex;
flex-direction: column;
overflow-y: scroll;
.block {
background-color: #fff;
padding: 20px;
border-radius: 8px;
margin-bottom: 8px;
}
.form-block {
padding-bottom: 0;
padding-top: 0;
}
}
}
:deep(.top-block) {
.van-cell {
padding: 0;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
}
&::after {
display: none;
}
.van-cell__title {
font-size: 14px;
color: #999;
}
.van-cell__value {
flex: 2.5;
font-size: 14px;
color: #333;
text-align: left;
}
}
}
:deep(.top-detail-block) {
background: #f8f8f8;
border-radius: 10px;
padding: 16px;
margin-top: 16px;
.van-cell {
background: #f8f8f8;
.van-cell__title {
font-size: 12px;
}
.van-cell__value {
text-align: right;
}
}
}
:deep(.download-btn) {
display: block;
width: 160px;
height: 30px;
font-size: 12px;
border: 0.5px solid #d8d8d9;
border-radius: 16.5px;
color: #333;
background-color: #fff;
margin: 20px auto 0;
.van-button__icon {
font-size: 10px;
}
}
:deep(.form-block) {
.van-cell-group {
&:after {
display: none;
}
.van-cell {
height: 50px;
line-height: 50px;
padding: 0;
.van-cell__title {
color: #999;
font-size: 14px;
}
.van-cell__value {
color: #333;
}
}
}
}
:deep(.step-block) {
margin-bottom: 24px;
.van-collapse-item {
.van-cell {
padding: 0;
}
.van-collapse-item__wrapper {
.van-collapse-item__content {
padding: 0;
}
}
}
.van-steps {
padding-bottom: 10px;
.van-steps__items {
.van-step {
&::after {
display: none;
}
.van-step__title {
margin-left: 20px;
.step-title {
font-size: 14px;
color: #333;
margin-bottom: 6px;
}
.step-title2 {
font-size: 15px;
color: #999;
}
}
}
.van-step__circle-container {
.active-dot {
width: 20px;
height: 20px;
line-height: 22px;
text-align: center;
background: #ff1d32;
border-radius: 50%;
color: #fff;
font-size: 14px;
}
.inactive-dot {
width: 8px;
height: 8px;
background: #e5e5e5;
border-radius: 50%;
}
}
}
}
}
.remark-block {
display: flex;
flex-direction: column;
.title {
font-size: 14px;
color: #999;
margin-bottom: 12px;
}
.text {
width: 311px;
height: 91px;
background: #f5f6f7;
border-radius: 4px;
appearance: none;
border: none;
padding: 8px 14px;
}
}
.approval-block {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
.title {
flex: 1.5;
font-size: 14px;
color: #999;
}
.van-cell {
flex: 3;
background: #f5f6f7;
border-radius: 4px;
padding: 4px 8px;
}
}
.bottom-block {
width: 100%;
height: 71px;
visibility: hidden;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 71px;
background: #ffffff;
padding: 0 16px;
.van-button {
height: 42px;
border: 1px solid #ff1d32;
border-radius: 22px;
color: #fff;
font-size: 14px;
background-color: #ff1d32;
flex: 1;
// &:first-child {
// margin-right: 15px;
// background-color: #fff;
// color: #ff1d32;
// }
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment