|
|
<template> |
|
|
<div class="banner"> |
|
|
<div class="nav"></div> |
|
|
<div class="main"> |
|
|
<div class="tabs"> |
|
|
<div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">标准下单</div> |
|
|
<div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">快速下单</div> |
|
|
<div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">批量下单</div> |
|
|
</div> |
|
|
<div v-if="active === 0" class="standard-box"> |
|
|
<div class="order-information"> |
|
|
<div class="header">订单详情</div> |
|
|
<div class="form"> |
|
|
<div class="left"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="配送类型"> |
|
|
<el-radio-group v-model="radio1" size="large"> |
|
|
<el-radio-button border label="配送" /> |
|
|
<el-radio-button border label="自提" /> |
|
|
</el-radio-group> |
|
|
</el-form-item> |
|
|
<el-form-item label="收货时间" class="receipt-time"> |
|
|
<el-date-picker |
|
|
v-model="value1" |
|
|
type="date" |
|
|
placeholder="Pick a date" |
|
|
:default-value="new Date(2010, 9, 1)" |
|
|
/> |
|
|
<el-select v-model="value" class="m-2" placeholder="Select"> |
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
</el-select> |
|
|
<div class="timing-receipt">定时配送</div> |
|
|
</el-form-item> |
|
|
<el-form-item label="收货区域" class="receipt-region"> |
|
|
<el-select v-model="value" class="m-2" placeholder="Select" style="width: 2.0833rem"> |
|
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
|
</el-select> |
|
|
</el-form-item> |
|
|
<el-form-item label="定位地址" class="locate-address"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="请选择你的定位信息" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="门牌号" class="door-number"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="详细地址，例如：3号楼2单元106" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="" class="map"> |
|
|
<div class="dlaceholding"></div> |
|
|
</el-form-item> |
|
|
<el-form-item label="地址自动识别" class="map"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="textarea" |
|
|
:rows="2" |
|
|
type="textarea" |
|
|
placeholder="试试粘贴收货人姓名、手机号、收货地址、可快速识别您的收货信息" |
|
|
/> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
<div class="right"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="收货人姓名" class="locate-address"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="请输入收货人姓名" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="收货人电话" class="door-number"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="请输入收货人电话号" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="顶花人姓名" class="door-number"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="请输入定花人电话" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="贺卡" class="map"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="textarea" |
|
|
:rows="2" |
|
|
type="textarea" |
|
|
placeholder="请填写贺卡留言" |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="订单备注" class="map"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="textarea" |
|
|
:rows="2" |
|
|
type="textarea" |
|
|
placeholder="订单备注，订单双方均可查看" |
|
|
/> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="order-information"> |
|
|
<div class="header">商品信息</div> |
|
|
<div class="form"> |
|
|
<div class="left"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="上传商品图片" class="upload-image"> |
|
|
<el-upload limit="4" action="#" list-type="picture-card" :auto-upload="false"> |
|
|
<el-icon><Plus /></el-icon> |
|
|
|
|
|
<template #file="{ file }"> |
|
|
<div> |
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> |
|
|
<span class="el-upload-list__item-actions"> |
|
|
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> |
|
|
<el-icon><zoom-in /></el-icon> |
|
|
</span> |
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)"> |
|
|
<el-icon><Download /></el-icon> |
|
|
</span> |
|
|
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)"> |
|
|
<el-icon><Delete /></el-icon> |
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</template> |
|
|
<template #tip> |
|
|
<div class="el-upload__tip"> |
|
|
<el-icon><InfoFilled /></el-icon>支持jpg，jpeg，png，gif格式，小于1M的图片 最多上传4张 |
|
|
</div> |
|
|
</template> |
|
|
</el-upload> |
|
|
|
|
|
<el-dialog v-model="dialogVisible"> |
|
|
<img w-full :src="dialogImageUrl" alt="Preview Image" /> |
|
|
</el-dialog> |
|
|
</el-form-item> |
|
|
<el-form-item label="商品数量" class="locate-address"> |
|
|
<el-input-number v-model="num" :min="1" :max="10" @change="handleChange" /> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
<div class="right"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="商品描述" class="product-description"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="textarea" |
|
|
:rows="2" |
|
|
type="textarea" |
|
|
placeholder="请输入商品描述" |
|
|
/> |
|
|
<div class="tip"> |
|
|
<el-icon><InfoFilled /></el-icon>详细描述商品信息能让花店快速接单~ |
|
|
</div> |
|
|
<div class="add-product">加入到商品库</div> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer"><div class="add-order-btn">增加商品</div></div> |
|
|
</div> |
|
|
<div class="order-information goods-info"> |
|
|
<div class="header">订单设置</div> |
|
|
<div class="form"> |
|
|
<div class="left"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="下单模式" class="order-mode"> |
|
|
<el-radio-group v-model="radio1" size="large"> |
|
|
<el-radio-button label="发布抢单" /> |
|
|
<el-radio-button label="发布报价单" /> |
|
|
<el-radio-button label="指定店铺" /> |
|
|
</el-radio-group> |
|
|
<div class="tip"> |
|
|
<el-icon><InfoFilled /></el-icon>详细描述商品信息能让花店快速接单~ |
|
|
</div> |
|
|
</el-form-item> |
|
|
<el-form-item label="销售价" class="sales-price"> |
|
|
<el-input |
|
|
style="width: 0.7813rem" |
|
|
v-model="input" |
|
|
placeholder="Please input" |
|
|
:formatter="(value :any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" |
|
|
:parser="(value : any) => value.replace(/\$\s?|(,*)/g, '')" |
|
|
/> |
|
|
<div class="tail"> |
|
|
<el-icon><QuestionFilled /></el-icon> |
|
|
<div>非必填</div> |
|
|
</div> |
|
|
</el-form-item> |
|
|
<el-form-item label="销售价" class="bid"> |
|
|
<el-input |
|
|
style="width: 0.7813rem" |
|
|
v-model="input" |
|
|
placeholder="Please input" |
|
|
:formatter="(value: any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')" |
|
|
:parser="(value: any) => value.replace(/\$\s?|(,*)/g, '')" |
|
|
/> |
|
|
<div class="tail"> |
|
|
（可用余额： |
|
|
<div class="money">￥0</div> |
|
|
<div class="krypton">立即充值</div> |
|
|
） |
|
|
</div> |
|
|
<div class="tip"> |
|
|
<el-icon><InfoFilled /></el-icon>价格过低可能导致店铺店铺不接单 <span>查看参考价格</span> |
|
|
</div> |
|
|
</el-form-item> |
|
|
<el-form-item label="画图审核"> |
|
|
<el-switch v-model="value1" /> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
<div class="right"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="商家备忘"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="textarea" |
|
|
:rows="2" |
|
|
type="textarea" |
|
|
placeholder="订单备忘，仅下单方乐见" |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="第三方订单号"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="请输入第三方订单号" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
<el-form-item label="发票信息"> |
|
|
<el-input |
|
|
style="width: 2.0833rem" |
|
|
v-model="input" |
|
|
placeholder="请输入发票信息·" |
|
|
maxlength="100" |
|
|
show-word-limit |
|
|
/> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer"> |
|
|
<div class="vip-name"> |
|
|
<el-form :model="form" label-width="120px"> |
|
|
<el-form-item label="店铺会员名称"> |
|
|
<el-input style="width: 1.2813rem" v-model="form.name" /> |
|
|
</el-form-item> |
|
|
</el-form> |
|
|
</div> |
|
|
<div class="shop-info"> |
|
|
<div class="title"> |
|
|
<div class="left"> <div class="shop-name">【广东省 佛山市 三水区】傲梅鲜花店</div> |
|
|
<div class="gradd">v2</div> |
|
|
<div class="status">接单中</div> |
|
|
<div class="online-status">1小时前接单</div></div> |
|
|
<div class="right"> |
|
|
<div class="record">证照信息</div> |
|
|
<div class="guarantee">服务保障</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="shop-content"> |
|
|
<div class="left"> |
|
|
<div class="image"></div> |
|
|
<div class="vip-info"> |
|
|
<ul> |
|
|
<li><div class="label">会员名称：</div><div class="name">明兵</div></li> |
|
|
<li><div class="phone">联系电话：</div><div class="telephone-number">12345678901</div></li> |
|
|
<li><div class="qq">客服QQ：</div><div class="qq-number">123456789</div></li> |
|
|
<li><div class="contact-address">店铺地址：</div><div class="address">心尚人鲜花店 三水区西南街道商业北二街1号109铺 </div> |
|
|
<div class="icon"><el-icon><MapLocation /></el-icon></div> |
|
|
<div class="map">查看地图</div> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="right"> |
|
|
<ul class="top"> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
</ul> |
|
|
<ul class="bottom"> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
<li><div class="content">10</div><div class="txt">信用分</div></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="order-information"> |
|
|
<div class="settlement"> |
|
|
<div class="left"> |
|
|
<div class="item">订单类型：<span>鲜花</span></div> |
|
|
<div class="item">商品数量：<span>1</span></div> |
|
|
<div class="item">收货时间：<span>1024-01-05 不限时间</span></div> |
|
|
</div> |
|
|
<div class="content"> |
|
|
订单价格： |
|
|
<div>￥0.00</div> |
|
|
</div> |
|
|
<div class="right">确认无误，立即下单</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div v-else-if="active === 1" class="fast-box">快速下单</div> |
|
|
<div v-else class="batch">批量下单</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
<script lang="ts" setup> |
|
|
import { onMounted, reactive, ref, toRefs, watch } from 'vue' |
|
|
const active = ref<number>(0) |
|
|
const form = reactive({ |
|
|
name: '', |
|
|
region: '', |
|
|
date1: '', |
|
|
date2: '', |
|
|
delivery: false, |
|
|
type: [], |
|
|
resource: '', |
|
|
desc: '', |
|
|
}) |
|
|
const radio1 = ref('') |
|
|
const onSubmit = () => { |
|
|
console.log('submit!') |
|
|
} |
|
|
const value = ref('') |
|
|
|
|
|
const options = [ |
|
|
{ |
|
|
value: 'Option1', |
|
|
label: 'Option1', |
|
|
}, |
|
|
{ |
|
|
value: 'Option2', |
|
|
label: 'Option2', |
|
|
}, |
|
|
{ |
|
|
value: 'Option3', |
|
|
label: 'Option3', |
|
|
}, |
|
|
{ |
|
|
value: 'Option4', |
|
|
label: 'Option4', |
|
|
}, |
|
|
{ |
|
|
value: 'Option5', |
|
|
label: 'Option5', |
|
|
}, |
|
|
] |
|
|
import { Delete, Download, Plus, ZoomIn, InfoFilled, QuestionFilled,MapLocation } from '@element-plus/icons-vue' |
|
|
|
|
|
import type { UploadFile } from 'element-plus' |
|
|
|
|
|
const dialogImageUrl = ref('') |
|
|
const dialogVisible = ref(false) |
|
|
const disabled = ref(false) |
|
|
|
|
|
const handleRemove = (file: UploadFile) => { |
|
|
console.log(file) |
|
|
} |
|
|
|
|
|
const handlePictureCardPreview = (file: UploadFile) => { |
|
|
dialogImageUrl.value = file.url! |
|
|
dialogVisible.value = true |
|
|
} |
|
|
|
|
|
const handleDownload = (file: UploadFile) => { |
|
|
console.log(file) |
|
|
} |
|
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
|
.banner { |
|
|
width: 100%; |
|
|
background-color: #fff; |
|
|
padding-bottom: 0.9792rem; |
|
|
.nav { |
|
|
height: 1.8333rem; |
|
|
width: 100%; |
|
|
background-color: skyblue; |
|
|
} |
|
|
.main { |
|
|
width: 6.25rem; |
|
|
margin: 0 auto; |
|
|
.tabs { |
|
|
width: 100%; |
|
|
height: 0.2083rem; |
|
|
background-color: #f3f4f8; |
|
|
display: flex; |
|
|
margin-top: 0.2344rem; |
|
|
margin-bottom: 0.1302rem; |
|
|
.standard { |
|
|
width: 0.7292rem; |
|
|
height: 100%; |
|
|
color: #252b3a; |
|
|
font-size: 0.0729rem; |
|
|
text-align: center; |
|
|
line-height: 0.2083rem; |
|
|
border-radius: 0.0313rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
.active { |
|
|
color: #fff; |
|
|
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%); |
|
|
} |
|
|
} |
|
|
.order-information { |
|
|
width: 100%; |
|
|
// height: 3.4896rem; |
|
|
border: 1px dashed #aaa; |
|
|
margin-top: 0.1563rem; |
|
|
.header { |
|
|
background-color: #f3f4f8; |
|
|
height: 0.2083rem; |
|
|
color: #252b3a; |
|
|
font-size: 0.0833rem; |
|
|
line-height: 0.2083rem; |
|
|
padding: 0 0.2604rem; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
} |
|
|
.header::before { |
|
|
content: ' '; |
|
|
display: block; |
|
|
background-color: #ff4e8d; |
|
|
width: 0.0156rem; |
|
|
height: 0.0833rem; |
|
|
margin-right: 0.026rem; |
|
|
} |
|
|
.form { |
|
|
display: flex; |
|
|
height: 100%; |
|
|
.left, |
|
|
.right { |
|
|
flex: 1; |
|
|
padding: 0.1042rem; |
|
|
} |
|
|
.left { |
|
|
.timing-receipt { |
|
|
width: 0.375rem; |
|
|
height: 0.1771rem; |
|
|
background-color: #f3f4f8; |
|
|
font-size: 0.0729rem; |
|
|
text-align: center; |
|
|
line-height: 0.1771rem; |
|
|
border-radius: 0.0781rem; |
|
|
color: #8a8e99; |
|
|
margin-left: 0.026rem; |
|
|
} |
|
|
.map { |
|
|
.dlaceholding { |
|
|
width: 2.0833rem; |
|
|
height: 0.7292rem; |
|
|
background-color: #d9d9d9; |
|
|
} |
|
|
} |
|
|
.upload-image { |
|
|
::v-deep .el-upload-list__item { |
|
|
width: 0.4792rem; |
|
|
height: 0.4792rem; |
|
|
} |
|
|
::v-deep .el-upload { |
|
|
width: 0.4792rem; |
|
|
height: 0.4792rem; |
|
|
} |
|
|
::v-deep .el-upload__tip { |
|
|
.el-icon { |
|
|
top: 2px; |
|
|
} |
|
|
} |
|
|
} |
|
|
.order-mode { |
|
|
.tip { |
|
|
width: 100%; |
|
|
color: #999999; |
|
|
font-size: 12px; |
|
|
.el-icon { |
|
|
top: 2px; |
|
|
} |
|
|
} |
|
|
} |
|
|
.sales-price { |
|
|
.tail { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: #999999; |
|
|
i { |
|
|
margin: 0 0.026rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
.bid { |
|
|
.tail { |
|
|
color: #999999; |
|
|
display: flex; |
|
|
.money { |
|
|
color: #e1a130; |
|
|
// margin-left: .026rem; |
|
|
} |
|
|
.krypton { |
|
|
color: #43a7e5; |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
margin-left: 0.026rem; |
|
|
} |
|
|
} |
|
|
.tip { |
|
|
width: 100%; |
|
|
color: #999999; |
|
|
font-size: 12px; |
|
|
.el-icon { |
|
|
top: 2px; |
|
|
} |
|
|
span { |
|
|
color: #43a7e5; |
|
|
text-decoration: underline; |
|
|
cursor: pointer; |
|
|
margin-left: 0.026rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.right { |
|
|
.product-description { |
|
|
.tip { |
|
|
width: 100%; |
|
|
color: #424447; |
|
|
font-size: 12px; |
|
|
.el-icon { |
|
|
top: 2px; |
|
|
} |
|
|
} |
|
|
.add-product { |
|
|
width: 0.9375rem; |
|
|
height: 0.1563rem; |
|
|
background-color: #f3f4f8; |
|
|
color: #101010; |
|
|
font-size: 0.0625rem; |
|
|
text-align: center; |
|
|
line-height: 0.1563rem; |
|
|
margin-top: 0.2344rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.settlement { |
|
|
height: 0.6563rem; |
|
|
padding: 0.0833rem 0.2135rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
.left { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
// align-items: center; |
|
|
justify-content: space-around; |
|
|
height: 100%; |
|
|
color: #575d6c; |
|
|
font-size: 0.0833rem; |
|
|
span { |
|
|
color: #252b3a; |
|
|
} |
|
|
} |
|
|
.content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
color: #252b3a; |
|
|
font-size: 0.0938rem; |
|
|
div { |
|
|
color: #ff4e8d; |
|
|
font-size: 0.1354rem; |
|
|
font-weight: 700; |
|
|
} |
|
|
} |
|
|
.right { |
|
|
width: 1.25rem; |
|
|
height: 0.2083rem; |
|
|
text-align: center; |
|
|
line-height: 0.2083rem; |
|
|
color: #fff; |
|
|
background: linear-gradient(90deg, #ff99bd 0%, #ffddbe 100%); |
|
|
border-radius: 0.0521rem; |
|
|
font-size: 0.0833rem; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
.footer { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
width: 100%; |
|
|
height: 0.3438rem; |
|
|
border: 1px solid transparent; |
|
|
background: linear-gradient(white, white) padding-box, |
|
|
repeating-linear-gradient(-45deg, #ccc 0, #ccc 0.5em, white 0, white 0.75em); |
|
|
.add-order-btn { |
|
|
width: 0.7188rem; |
|
|
height: 0.2083rem; |
|
|
border: 1px solid #ff4e8d; |
|
|
color: #ff4e8d; |
|
|
text-align: center; |
|
|
line-height: 0.2083rem; |
|
|
font-size: 0.0729rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
.goods-info { |
|
|
.footer { |
|
|
display: block !important; |
|
|
height: auto; |
|
|
.vip-name{ |
|
|
margin-top: .125rem; |
|
|
} |
|
|
.shop-info{ |
|
|
padding: .125rem .1146rem; |
|
|
|
|
|
|
|
|
.title{ |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
.left{ |
|
|
display: flex; |
|
|
align-items: center; |
|
|
.shop-name{ |
|
|
color: #252B3A; |
|
|
font-size: .0833rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
.gradd{ |
|
|
margin-left: .0521rem; |
|
|
} |
|
|
.status{ |
|
|
width: .2604rem; |
|
|
height: .099rem; |
|
|
background-color: #FCECED; |
|
|
text-align: center; |
|
|
line-height: .099rem; |
|
|
font-size: .0625rem; |
|
|
color: #FF4E8D; |
|
|
margin-left: .0833rem; |
|
|
} |
|
|
.online-status{ |
|
|
color: #ff4e8d; |
|
|
font-size: .0729rem; |
|
|
margin-left: .1563rem; |
|
|
font-weight: 600; |
|
|
} |
|
|
} |
|
|
.right{ |
|
|
display: flex; |
|
|
.record,.guarantee{ |
|
|
width: .4271rem; |
|
|
height: .099rem; |
|
|
text-align: center; |
|
|
line-height: .099rem; |
|
|
} |
|
|
.record{ |
|
|
border: 1px solid #FF4E8D; |
|
|
color: #FF4E8D; |
|
|
} |
|
|
.guarantee{ |
|
|
border: 1px solid #1AA48D; |
|
|
color: #1AA48D; |
|
|
margin-left: .0521rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
.shop-content{ |
|
|
padding: .0781rem .1146rem 0 .0781rem; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
.left{ |
|
|
display: flex; |
|
|
.image{ |
|
|
height: .5625rem; |
|
|
width: .5625rem; |
|
|
background-color: #C4C4C4; |
|
|
} |
|
|
.vip-info{ |
|
|
padding: .0521rem; |
|
|
ul{ |
|
|
|
|
|
height: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: space-between; |
|
|
li{ |
|
|
list-style: none; |
|
|
display: flex; |
|
|
.label,.phone,.qq,.contact-address{ |
|
|
font-size: .0625rem; |
|
|
color: #8A8E99; |
|
|
} |
|
|
.name,.telephone-number,.qq-number,.address{ |
|
|
font-size: .0625rem; |
|
|
color: #333333; |
|
|
} |
|
|
.icon{ |
|
|
font-size: 14px; |
|
|
color: #dd323c; |
|
|
} |
|
|
.map{ |
|
|
font-size: .0625rem; |
|
|
color: #8A8E99; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
.right{ |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: space-between; |
|
|
ul{ |
|
|
display: flex; |
|
|
border: 1px solid #E1E1E3; |
|
|
border-radius: .026rem; |
|
|
li{ |
|
|
position: relative; |
|
|
list-style: none; |
|
|
width:.3958rem; |
|
|
height: .2604rem; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
.content{ |
|
|
color: #FF4E8D; |
|
|
font-size: .0833rem; |
|
|
} |
|
|
.txt{ |
|
|
font-size: .0625rem; |
|
|
color: #575D6C; |
|
|
} |
|
|
} |
|
|
li:nth-child(n+2)::after{ |
|
|
content: ' '; |
|
|
display: block; |
|
|
width: 1PX; |
|
|
height: .1563rem; |
|
|
background-color: #E1E1E3; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
// position: absolute; |
|
|
// background-color: pink; |
|
|
} |
|
|
} |
|
|
.bottom{ |
|
|
// margin-top: .0521rem; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
::v-deep .el-date-editor.el-input, |
|
|
.el-date-editor.el-input__wrapper { |
|
|
width: 0.625rem; |
|
|
} |
|
|
::v-deep .el-input__prefix { |
|
|
display: none; |
|
|
} |
|
|
.receipt-time { |
|
|
::v-deep .el-input { |
|
|
width: 0.6667rem; |
|
|
margin-left: 0.026rem; |
|
|
} |
|
|
} |
|
|
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner { |
|
|
color: #ff518f; |
|
|
background: none; |
|
|
} |
|
|
::v-deep .el-radio-button:last-child .el-radio-button__inner { |
|
|
width: 0.6667rem; |
|
|
// height:.1771rem; |
|
|
} |
|
|
::v-deep .el-radio-button:first-child .el-radio-button__inner { |
|
|
width: 0.6667rem; |
|
|
margin-right: 0.026rem; |
|
|
} |
|
|
} |
|
|
</style>
|
|
|
|
