1140 lines
30 KiB
Vue
1140 lines
30 KiB
Vue
<template>
|
||
<div class="new-contoner">
|
||
<div class="left-box">
|
||
<div class="box-top">
|
||
<div class="o-top" v-if="userInfo" >
|
||
<div class="d-s">
|
||
<img src="./imgs/new_user.png" style="width: 28px;height: 28px;margin-right: 10px">
|
||
<div>
|
||
<div style="font-weight: bold">匿名</div>
|
||
<div class="d-s">
|
||
<span>12345679912</span>
|
||
<img src="./imgs/fz.png" style="width: 17px;height: 17px;margin: 0px 10px">
|
||
<img src="./imgs/vipicon.png" style="width: 23px;height: 19px;">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-s">
|
||
<div class="an_bor" @click="addMemberRecharge()" >会员充值</div>
|
||
<div class="an_bor">重置会员</div>
|
||
<div class="an_bor">赠送优惠券</div>
|
||
</div>
|
||
</div>
|
||
<div class="o-top" v-if="!userInfo" >
|
||
<div class="left_input">
|
||
<input type="text" placeholder="请输入会员手机号" >
|
||
<i class="el-icon-search"></i>
|
||
</div>
|
||
<div class="d-s">
|
||
<div class="an_bor" @click="addVip()" >新增会员</div>
|
||
</div>
|
||
</div>
|
||
<div class="t-top">
|
||
<div class="three_box">油品:￥0.00</div>
|
||
<div style="color: #F4F5F9">|</div>
|
||
<div class="three_box">商品:￥0.00</div>
|
||
<div style="color: #F4F5F9">|</div>
|
||
<div class="three_box">合计:￥0.00</div>
|
||
</div>
|
||
<div class="d-top">
|
||
<div class="d-b">
|
||
|
||
<el-checkbox v-model="checkAll">活动优惠 <i class="el-icon-arrow-down"></i></el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<!-- 下拉列表插入-->
|
||
<div v-if="checkAll == true">
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll1">优惠1</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll2">优惠2</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
<div class="x-d-b">
|
||
<el-checkbox v-model="checkAll3">优惠3</el-checkbox>
|
||
<div class="or_num">-￥0.00</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-b">
|
||
<el-checkbox v-model="boxShow1">储值卡（账户余额:0元)</el-checkbox>
|
||
|
||
<div class="or_num">￥0.00</div>
|
||
</div>
|
||
<div class="d-b">
|
||
<el-checkbox v-model="boxShow2">囤油卡（账户余额:1000元)</el-checkbox>
|
||
|
||
<div class="or_num">-￥220.00</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="three-top">
|
||
<div class="addbor">
|
||
<div class="">扫码支付</div>
|
||
<div class="or_num">0.00</div>
|
||
</div>
|
||
<div class="addbor">
|
||
<div class="">找零</div>
|
||
<div class="or_num">0.00</div>
|
||
</div>
|
||
<div class="addbor">
|
||
<div class="">加油员</div>
|
||
<div class="or_num">0.00</div>
|
||
</div>
|
||
</div>
|
||
<div class="er-box"></div>
|
||
<div class="wrap-box">
|
||
<div class="f-box" v-for="(item,index) in cardList" :class="{'f-acvite' : index == ruleIndex }" @click="setindex(index)" :key="index">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div>
|
||
<div class="price_">￥0.00</div>
|
||
<div class="price_prefer">优惠合计:￥0.00元</div>
|
||
</div>
|
||
<div class="anniu">立即结算</div>
|
||
</div>
|
||
</div>
|
||
<div class="cont-box">
|
||
<div class="box-top">
|
||
<div class="cont-tab">
|
||
<div class="tab-box" v-for="(item,index) in tabList" :key="index" @click="setTabindex(index)">
|
||
<div class="tab-name" :class="{ 'active_name' : tabIndex == index }">{{ item.name }}</div>
|
||
<div class="gang" :class="{ 'active_gang' : tabIndex == index }"></div>
|
||
</div>
|
||
</div>
|
||
<div class="tab-kuang" style="flex-wrap: wrap">
|
||
<div class="card92" v-for="(item,index) in 3" @click="setRefuelingAmount()" >
|
||
<div>汽油 92#</div>
|
||
<div class="card-title">1号枪</div>
|
||
<div class="c-b-d">
|
||
<img src="./imgs/92oil.png" style="width: 16px;height: 16px">
|
||
<div>92号汽油罐</div>
|
||
</div>
|
||
</div>
|
||
<div class="card95" v-for="(item,index) in 3">
|
||
<div>汽油 95#</div>
|
||
<div class="card-title">1号枪</div>
|
||
<div class="c-b-d">
|
||
<img src="./imgs/95oil.png" style="width: 16px;height: 16px">
|
||
<div>95号汽油罐</div>
|
||
</div>
|
||
</div>
|
||
<div class="card98" v-for="(item,index) in 3">
|
||
<div>汽油 98#</div>
|
||
<div class="card-title">1号枪</div>
|
||
<div class="c-b-d">
|
||
<img src="./imgs/98oil.png" style="width: 16px;height: 16px">
|
||
<div>98号汽油罐</div>
|
||
</div>
|
||
</div>
|
||
<div class="card0" v-for="(item,index) in 3">
|
||
<div>柴油 0#</div>
|
||
<div class="card-title">1号枪</div>
|
||
<div class="c-b-d">
|
||
<img src="./imgs/0oil.png" style="width: 16px;height: 16px">
|
||
<div>0#柴油罐</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
<div class="c-bottom">
|
||
8号枪（21.03L/191.7936元）；10号枪（45.03L/300.2852元）
|
||
</div>
|
||
<div class="bottom-b-d">
|
||
<div>订单笔数 <span style="color: #FF9655">0件</span></div>
|
||
<div>订单金额 <span style="color: #FF9655">￥0.00</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="anniu-c">
|
||
重置
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right-box">
|
||
<div class="box-top">
|
||
<div class="r-top">非油商品</div>
|
||
<el-autocomplete
|
||
style="width: 95%;margin: 15px "
|
||
v-model="state"
|
||
:fetch-suggestions="querySearchAsync"
|
||
placeholder="请输入内容"
|
||
@select="handleSelect"
|
||
></el-autocomplete>
|
||
<div class="taber-top">
|
||
<div class="goods_name">商品</div>
|
||
<div class="stock_name">库存</div>
|
||
<div class="u-price_name">单价</div>
|
||
<div class="num_name">数量</div>
|
||
<div class="orerate_name">操作</div>
|
||
</div>
|
||
<div class="taber-box" v-for="(item,index) in 5" :key="index">
|
||
<div class="goods_name">
|
||
<img src="../../../assets/images/goods.png" style="width: 30px;height: 30px">
|
||
</div>
|
||
<div class="stock_name">60</div>
|
||
<div class="u-price_name">6.8</div>
|
||
<div class="num_name">1</div>
|
||
<div class="orerate_name">
|
||
<span style="color: red;cursor: pointer">删除</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-b-d">
|
||
<div>订单笔数 <span style="color: #FF9655">0件</span></div>
|
||
<div>订单金额 <span style="color: #FF9655">￥27.00</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="box-bottom">
|
||
<div class="anniu-c">
|
||
重置
|
||
</div>
|
||
<div class="d-s">
|
||
<div class="anniu-lv" @click="invokePickUpTheOrder" >取单</div>
|
||
<div class="anniu-lan" @click="invokeHangingAnOrder" >挂单</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 弹窗-->
|
||
<el-dialog
|
||
title="新增会员"
|
||
:visible.sync="newMember"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<div>请顾客扫码领取会员卡</div>
|
||
<img src="./imgs/ewm.png" style="width: 180px;height: 180px;">
|
||
<div class="red-size">微信/支付宝扫一扫</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="newMember = false">打印二维码</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="扫码支付"
|
||
:visible.sync="ScanCodePayment"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<div class="title_">收款： <span style="color: #F44522">¥0.00</span></div>
|
||
<img src="./imgs/smzf.png" style="width: 171px;height: 122px;">
|
||
<div>请顾客出示付款码，或者刷脸支付</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="ScanCodePayment = false">关闭</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="现金支付"
|
||
:visible.sync="cashPayment"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<div class="title_">应收款： <span style="color: #F44522">¥98.00</span></div>
|
||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="收款金额" prop="name">
|
||
<el-input v-model="ruleForm.name">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<div class="t-size">
|
||
应找零：<span style="color: #F44522">¥20.00</span>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="cashPayment = false">确定收款</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="挂单"
|
||
:visible.sync="hangingAnOrder"
|
||
width="542px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
|
||
<el-form :model="ruleForms" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
|
||
<el-form-item label="挂单名称" prop="name">
|
||
<el-input v-model="ruleForms.name">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<div class="h-size">
|
||
挂单只可将非油商品进行挂单,挂单成功后可在取单页面进行取单操作、取单
|
||
时，可根据挂单名称取单
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="hangingAnOrder = false">取 消</el-button>
|
||
<el-button type="primary" @click="hangingAnOrder = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="支付结果"
|
||
:visible.sync="paymentResults"
|
||
width="439px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
|
||
<div class="hui-box">
|
||
<div class="hui-box-bt">
|
||
<div>支付方式</div>
|
||
<div>现金</div>
|
||
</div>
|
||
<div class="hui-box-bt">
|
||
<div>实付金额</div>
|
||
<div>¥0.00</div>
|
||
</div>
|
||
<div class="hui-box-bt">
|
||
<div>订单金额</div>
|
||
<div>¥10.00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="paymentResults = false">关闭（3s)</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="取单"
|
||
:visible.sync="pickUpTheOrder"
|
||
width="910px"
|
||
center
|
||
>
|
||
<pickUp></pickUp>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="pickUpTheOrder = false">取消</el-button>
|
||
<el-button type="primary" @click="pickUpTheOrder = false">作废</el-button>
|
||
<el-button type="primary" @click="pickUpTheOrder = false">取单</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="挂账"
|
||
:visible.sync="accountPending"
|
||
width="542px"
|
||
center
|
||
>
|
||
<accountPending></accountPending>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="accountPending = false">取 消</el-button>
|
||
<el-button type="primary" @click="accountPending = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="会员充值"
|
||
:visible.sync="memberRecharge"
|
||
width="910px"
|
||
center
|
||
>
|
||
<memberRecharge></memberRecharge>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="memberRecharge = false">取 消</el-button>
|
||
<el-button type="primary" @click="memberRecharge = false">确认充值</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="加油金额"
|
||
:visible.sync="refuelingAmount"
|
||
width="542px"
|
||
center
|
||
>
|
||
<div class="tc-box">
|
||
<refuelingAmount></refuelingAmount>
|
||
</div>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="refuelingAmount = false">取 消</el-button>
|
||
<el-button type="primary" @click="refuelingAmount = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import pickUp from './newHomeComponents/pickUpTheOrder.vue'
|
||
import accountPending from './newHomeComponents/accountPending.vue'
|
||
import memberRecharge from './newHomeComponents/memberRecharge.vue'
|
||
import refuelingAmount from './newHomeComponents/refuelingAmount.vue'
|
||
export default {
|
||
data() {
|
||
return {
|
||
restaurants: [],
|
||
state: '',
|
||
timeout: null,
|
||
boxShow: true,
|
||
boxShow1: true,
|
||
boxShow2: true,
|
||
checkList: [],
|
||
checkAll: true,
|
||
checkAll1: false,
|
||
checkAll2: false,
|
||
checkAll3: false,
|
||
isIndeterminate: true,
|
||
cardList: [
|
||
{
|
||
name: '储值卡',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '支付宝',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '微信',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '银联二维码',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '现金',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '小程序码',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '挂账',
|
||
num: '0'
|
||
},
|
||
{
|
||
name: '囤油卡',
|
||
num: '0'
|
||
}
|
||
],
|
||
tabList: [
|
||
{
|
||
name: '全部',
|
||
id: ''
|
||
},
|
||
{
|
||
name: '92#',
|
||
id: '1'
|
||
},
|
||
{
|
||
name: '95#',
|
||
id: '2'
|
||
},
|
||
{
|
||
name: '98#',
|
||
id: '3'
|
||
},
|
||
{
|
||
name: '0#',
|
||
id: '4'
|
||
},
|
||
],
|
||
userInfo:true,//判断登录状态
|
||
ruleIndex:0,
|
||
tabIndex: 0,
|
||
newMember: false,
|
||
ScanCodePayment: false,
|
||
cashPayment: false,
|
||
ruleForm: {
|
||
name: '',
|
||
},
|
||
ruleForms: {
|
||
name: '',
|
||
},
|
||
rules: {
|
||
name: [
|
||
{required: true, message: '请输入活动名称', trigger: 'blur'},
|
||
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
|
||
],
|
||
},
|
||
refuelingAmount: false,
|
||
hangingAnOrder: false,
|
||
paymentResults: false,
|
||
pickUpTheOrder: false,
|
||
accountPending: false,
|
||
memberRecharge: false,
|
||
|
||
}
|
||
},
|
||
components:{
|
||
pickUp,
|
||
accountPending,
|
||
memberRecharge,
|
||
refuelingAmount
|
||
},
|
||
mounted() {
|
||
this.restaurants = this.loadAll();
|
||
},
|
||
methods: {
|
||
invokePickUpTheOrder(){
|
||
this.pickUpTheOrder = true
|
||
},
|
||
invokeHangingAnOrder(){
|
||
this.hangingAnOrder = true
|
||
},
|
||
addVip(){
|
||
this.newMember = true
|
||
},
|
||
addMemberRecharge(){
|
||
this.memberRecharge = true
|
||
},
|
||
changeBox() {
|
||
this.boxShow = !this.boxShow
|
||
},
|
||
changeBox1() {
|
||
this.boxShow1 = !this.boxShow1
|
||
},
|
||
changeBox2() {
|
||
this.boxShow2 = !this.boxShow2
|
||
},
|
||
setTabindex(index) {
|
||
this.tabIndex = index
|
||
},
|
||
setindex(index){
|
||
this.ruleIndex = index
|
||
},
|
||
setRefuelingAmount(){
|
||
this.refuelingAmount = true
|
||
},
|
||
loadAll() {
|
||
return [
|
||
{ "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
|
||
{ "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
|
||
{ "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
|
||
{ "value": "泷千家(天山西路店)", "address": "天山西路438号" },
|
||
{ "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
|
||
{ "value": "贡茶", "address": "上海市长宁区金钟路633号" },
|
||
{ "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
|
||
{ "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
|
||
{ "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
|
||
{ "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
|
||
{ "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
|
||
{ "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
|
||
{ "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
|
||
{ "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
|
||
{ "value": "NONO JUICE 鲜榨果汁", "address": "上海市长宁区天山西路119号" },
|
||
{ "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
|
||
{ "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
|
||
{ "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
|
||
{ "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
|
||
{ "value": "枪会山", "address": "上海市普陀区棕榈路" },
|
||
{ "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
|
||
{ "value": "钱记", "address": "上海市长宁区天山西路" },
|
||
{ "value": "壹杯加", "address": "上海市长宁区通协路" },
|
||
{ "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
|
||
{ "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
|
||
{ "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
|
||
{ "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
|
||
{ "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
|
||
{ "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
|
||
{ "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
|
||
{ "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
|
||
{ "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
|
||
{ "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||
{ "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
|
||
{ "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
|
||
{ "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
|
||
{ "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
|
||
{ "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
|
||
{ "value": "浏阳蒸菜", "address": "天山西路430号" },
|
||
{ "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
|
||
{ "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
|
||
{ "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
|
||
{ "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
|
||
{ "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
|
||
{ "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
|
||
{ "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
|
||
{ "value": "阳阳麻辣烫", "address": "天山西路389号" },
|
||
{ "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
|
||
];
|
||
},
|
||
querySearchAsync(queryString, cb) {
|
||
var restaurants = this.restaurants;
|
||
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
|
||
|
||
clearTimeout(this.timeout);
|
||
this.timeout = setTimeout(() => {
|
||
cb(results);
|
||
}, 1000 * Math.random());
|
||
},
|
||
createStateFilter(queryString) {
|
||
return (state) => {
|
||
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
||
};
|
||
},
|
||
handleSelect(item) {
|
||
console.log(item);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
input {
|
||
width: 100%;
|
||
border: none;
|
||
outline: none;
|
||
background-color: transparent;
|
||
padding: 0;
|
||
margin: 0;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
color: inherit;
|
||
}
|
||
|
||
.new-contoner {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
height: 100vh;
|
||
padding: 20px 0px;
|
||
padding-right: 20px;
|
||
padding-bottom: 0px;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.left-box {
|
||
width: 33%;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cont-box {
|
||
width: 33%;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 10px;
|
||
margin: 0px 20px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.right-box {
|
||
width: 33%;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.box-top {
|
||
height: 84vh;
|
||
background: #fff;
|
||
margin-bottom: 5px;
|
||
position: relative;
|
||
}
|
||
|
||
.box-bottom {
|
||
height: 12vh;
|
||
background: #fff;
|
||
z-index: 9;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between
|
||
}
|
||
|
||
.o-top {
|
||
width: 100%;
|
||
height: 80px;
|
||
background: #FF9655;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.an_bor {
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
border: 1px solid #fff;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #FFFFFF;
|
||
justify-content: center;
|
||
margin: 0px 5px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.t-top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 20px 0px;
|
||
border-bottom: #F4F5F9 1px solid;
|
||
}
|
||
|
||
.three_box {
|
||
width: 33%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
}
|
||
|
||
.d-b {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px 0px;
|
||
}
|
||
|
||
.x-d-b {
|
||
width: 90%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px 0px;
|
||
margin-left: 10%;
|
||
}
|
||
|
||
.d-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0px 40px;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
border-bottom: #f6f8f9 4px solid;
|
||
}
|
||
|
||
.checkbox {
|
||
width: 15px;
|
||
height: 15px;
|
||
border: 1px solid #ddd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.d_text {
|
||
color: #555555;
|
||
margin-left: 10px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.or_num {
|
||
color: #FF9655;
|
||
}
|
||
|
||
.active {
|
||
background: #FF9655 !important;
|
||
color: #FFFFFF !important;
|
||
border: 1px solid #FF9655;
|
||
}
|
||
|
||
.three-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
border-bottom: #f6f8f9 4px solid;
|
||
}
|
||
|
||
.addbor {
|
||
border-bottom: 1px solid #f6f8f9;
|
||
padding: 15px 40px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.er-box {
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
.wrap-box {
|
||
height: 190px;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
}
|
||
|
||
.f-box {
|
||
width: 31%;
|
||
height: 44px;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
margin-right: 2%;
|
||
margin-bottom: 2%;
|
||
border-radius: 10px;
|
||
border: 1px solid #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.f-acvite {
|
||
background: #409eff !important;
|
||
color: #fff !important;
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
.anniu {
|
||
width: 160px;
|
||
height: 60px;
|
||
background: linear-gradient(312deg, #FF945B 0%, #FEB37C 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.price_ {
|
||
font-size: 24px;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.price_prefer {
|
||
font-size: 16px;
|
||
color: #FF4347;
|
||
}
|
||
|
||
.cont-tab {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
padding: 0px 20px;
|
||
padding-top: 25px;
|
||
}
|
||
|
||
.r-top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
padding: 0px 20px;
|
||
padding-top: 15px;
|
||
padding-bottom: 10px;
|
||
font-size: 16px;
|
||
color: #555555;
|
||
}
|
||
|
||
.input-box {
|
||
width: 90%;
|
||
height: 40px;
|
||
background: #FAFAFA;
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #DDDDDD;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 0px 15px;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.gang {
|
||
width: 24px;
|
||
height: 3px;
|
||
//background: linear-gradient( 90deg, #FF8646 0%, #FFA360 100%);
|
||
border-radius: 3px 3px 3px 3px;
|
||
}
|
||
|
||
.active_gang {
|
||
background: linear-gradient(90deg, #FF8646 0%, #FFA360 100%) !important;
|
||
}
|
||
|
||
.tab-box {
|
||
margin-right: 30px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.active_name {
|
||
font-size: 14px;
|
||
color: #555555;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-kuang {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-content: flex-start;
|
||
flex-wrap: wrap;
|
||
overflow: auto;
|
||
height: 68vh;
|
||
|
||
}
|
||
|
||
.card92 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(255, 150, 85, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #FF9655;
|
||
color: #FF9655;
|
||
font-size: 12px;
|
||
color: #FF9655;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card0 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(255, 181, 25, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #FFB519;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
color: #FFB519;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
}
|
||
|
||
.card98 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(64, 158, 255, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #409EFF;
|
||
font-size: 12px;
|
||
color: #409EFF;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card95 {
|
||
width: 32%;
|
||
height: 90px;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: rgba(13, 194, 145, 0.1);
|
||
box-shadow: 0px 3px 6px 1px rgba(255, 255, 255, 0.4), inset 0px 3px 6px 1px rgba(255, 255, 255, 0.5);
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #0DC291;
|
||
font-size: 12px;
|
||
color: #0DC291;
|
||
overflow: hidden;
|
||
margin-right: 1%;
|
||
margin-bottom: 1%;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 24px;
|
||
color: #555555;
|
||
margin: 6px auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.c-b-d {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.c-bottom {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
border-bottom: 2px solid #F4F5F9;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
|
||
}
|
||
|
||
.bottom-b-d {
|
||
position: absolute;
|
||
bottom: 0px;
|
||
width: 100%;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
font-size: 16px;
|
||
color: #777777;
|
||
}
|
||
|
||
.anniu-c {
|
||
width: 80px;
|
||
height: 36px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px 6px 6px 6px;
|
||
border: 1px solid #DDDDDD;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #777777;
|
||
}
|
||
|
||
.anniu-lv {
|
||
width: 80px;
|
||
height: 36px;
|
||
background: linear-gradient(312deg, #9CDCA0 0%, #5BC557 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.anniu-lan {
|
||
cursor: pointer;
|
||
width: 80px;
|
||
height: 36px;
|
||
background: linear-gradient(312deg, #70CAFD 0%, #0BADFE 100%, #02AAFE 100%);
|
||
border-radius: 6px 6px 6px 6px;
|
||
margin: 0px 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.taber-top {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 5px 20px;
|
||
background: #f4f5f9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.taber-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 10px 20px;
|
||
border-bottom: 1px solid #f4f5f9;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.goods_name {
|
||
width: 35%;
|
||
|
||
|
||
}
|
||
|
||
.stock_name {
|
||
width: 15%;
|
||
text-align: center;
|
||
|
||
}
|
||
|
||
.u-price_name {
|
||
width: 15%;
|
||
text-align: center;
|
||
}
|
||
|
||
.num_name {
|
||
width: 15%;
|
||
text-align: center;
|
||
}
|
||
|
||
.orerate_name {
|
||
width: 20%;
|
||
text-align: center;
|
||
}
|
||
|
||
.tc-box {
|
||
text-align: center;
|
||
}
|
||
|
||
.red-size {
|
||
font-size: 18px;
|
||
color: #F44522;
|
||
}
|
||
|
||
.title_ {
|
||
font-size: 28px;
|
||
color: #333333;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.r-size {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.t-size {
|
||
width: 100%;
|
||
text-align: right;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
|
||
.h-size {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
margin-left: 100px;
|
||
text-align: left;
|
||
}
|
||
|
||
.hui-box {
|
||
width: 282px;
|
||
|
||
background: #FAFAFA;
|
||
margin: 15px auto;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.hui-box-bt {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 15px auto;
|
||
}
|
||
.left_input{
|
||
width: 70%;
|
||
border: 1px solid #fff;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 10px 5px;
|
||
border-radius: 8px;
|
||
}
|
||
</style>
|