9.9
This commit is contained in:
DESKTOP-369JRHT\12997
parent
469a62f562
commit
9322714578
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/0oil.png
Normal file
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/0oil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1013 B |
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/92oil.png
Normal file
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/92oil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/95oil.png
Normal file
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/95oil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/98oil.png
Normal file
BIN
fuintCashierWeb/src/views/cashier/NewComponents/imgs/98oil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,151 +1,334 @@
|
||||
<template>
|
||||
<div class="new-contoner">
|
||||
<div class="left-box">
|
||||
<div class="box-top">
|
||||
<div class="o-top">
|
||||
<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">会员充值</div>
|
||||
<div class="an_bor">重置会员</div>
|
||||
<div class="an_bor">赠送优惠券</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">
|
||||
<div class="new-contoner">
|
||||
<div class="left-box">
|
||||
<div class="box-top">
|
||||
<div class="o-top">
|
||||
<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">
|
||||
<div class="checkbox" @click="changeBox" :class="{ 'active' : boxShow == true }" > <i class="el-icon-check" size="15" v-if="boxShow == true" ></i> </div>
|
||||
<div class="d_text">活动优惠</div>
|
||||
<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 class="or_num">-￥0.00</div>
|
||||
</div>
|
||||
<div class="d-b">
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox1" :class="{ 'active' : boxShow1 == true }" > <i class="el-icon-check" size="15" v-if="boxShow1 == true" ></i> </div>
|
||||
<div class="d_text">储值卡（账户余额:0元)</div>
|
||||
</div>
|
||||
<div class="or_num">￥0.00</div>
|
||||
</div>
|
||||
<div class="d-b" >
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox2" :class="{ 'active' : boxShow2 == true }" > <i class="el-icon-check" size="15" v-if="boxShow2 == true" ></i> </div>
|
||||
<div class="d_text">囤油卡（账户余额:1000元)</div>
|
||||
</div>
|
||||
<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>
|
||||
<div class="box-bottom"></div>
|
||||
</div>
|
||||
<div class="cont-box">
|
||||
<div class="box-top"></div>
|
||||
<div class="box-bottom"></div>
|
||||
</div>
|
||||
<div class="right-box">
|
||||
<div class="box-top"></div>
|
||||
<div class="box-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-s">
|
||||
<div class="an_bor">会员充值</div>
|
||||
<div class="an_bor">重置会员</div>
|
||||
<div class="an_bor">赠送优惠券</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">
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox" :class="{ 'active' : boxShow == true }">
|
||||
<i class="el-icon-check" size="15" v-if="boxShow == true"></i>
|
||||
</div>
|
||||
<div class="d_text">活动优惠 <i class="el-icon-arrow-down"></i> </div>
|
||||
</div>
|
||||
<div class="or_num">-￥0.00</div>
|
||||
</div>
|
||||
<div class="d-b">
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox1" :class="{ 'active' : boxShow1 == true }"><i
|
||||
class="el-icon-check" size="15" v-if="boxShow1 == true"></i></div>
|
||||
<div class="d_text">储值卡（账户余额:0元)</div>
|
||||
</div>
|
||||
<div class="or_num">￥0.00</div>
|
||||
</div>
|
||||
<div class="d-b">
|
||||
<div class="d-s">
|
||||
<div class="checkbox" @click="changeBox2" :class="{ 'active' : boxShow2 == true }"><i
|
||||
class="el-icon-check" size="15" v-if="boxShow2 == true"></i></div>
|
||||
<div class="d_text">囤油卡（账户余额:1000元)</div>
|
||||
</div>
|
||||
<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" :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">
|
||||
<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>
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="商品名称，商品关键词，商品条码">
|
||||
</div>
|
||||
<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">取单</div>
|
||||
<div class="anniu-lan">挂单</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
boxShow:true,
|
||||
boxShow1:true,
|
||||
boxShow2:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
changeBox(){
|
||||
data() {
|
||||
return {
|
||||
boxShow: true,
|
||||
boxShow1: true,
|
||||
boxShow2: 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'
|
||||
},
|
||||
],
|
||||
tabIndex: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeBox() {
|
||||
this.boxShow = !this.boxShow
|
||||
},
|
||||
changeBox1(){
|
||||
changeBox1() {
|
||||
this.boxShow1 = !this.boxShow1
|
||||
},
|
||||
changeBox2(){
|
||||
changeBox2() {
|
||||
this.boxShow2 = !this.boxShow2
|
||||
},
|
||||
setTabindex(index) {
|
||||
this.tabIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.new-contoner{
|
||||
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);
|
||||
.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);
|
||||
.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{
|
||||
|
||||
.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);
|
||||
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{
|
||||
|
||||
.box-top {
|
||||
height: 84vh;
|
||||
background: #fff;
|
||||
margin-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
.box-bottom{
|
||||
height: 15vh;
|
||||
|
||||
.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{
|
||||
|
||||
.o-top {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #FF9655;
|
||||
@ -158,11 +341,13 @@ data(){
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.d-s{
|
||||
|
||||
.d-s {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.an_bor{
|
||||
|
||||
.an_bor {
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
border: 1px solid #fff;
|
||||
@ -175,7 +360,8 @@ data(){
|
||||
margin: 0px 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.t-top{
|
||||
|
||||
.t-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -184,7 +370,8 @@ data(){
|
||||
padding: 20px 0px;
|
||||
border-bottom: #F4F5F9 1px solid;
|
||||
}
|
||||
.three_box{
|
||||
|
||||
.three_box {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -192,14 +379,16 @@ data(){
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
}
|
||||
.d-b{
|
||||
|
||||
.d-b {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
.d-top{
|
||||
|
||||
.d-top {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0px 40px;
|
||||
@ -207,7 +396,8 @@ data(){
|
||||
color: #555555;
|
||||
border-bottom: #f6f8f9 4px solid;
|
||||
}
|
||||
.checkbox{
|
||||
|
||||
.checkbox {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px solid #ddd;
|
||||
@ -216,24 +406,30 @@ data(){
|
||||
justify-content: center;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.d_text{
|
||||
|
||||
.d_text {
|
||||
color: #555555;
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.or_num{
|
||||
|
||||
.or_num {
|
||||
color: #FF9655;
|
||||
}
|
||||
.active{
|
||||
|
||||
.active {
|
||||
background: #FF9655 !important;
|
||||
color: #FFFFFF !important;
|
||||
border: 1px solid #FF9655;
|
||||
}
|
||||
.three-top{
|
||||
|
||||
.three-top {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-bottom: #f6f8f9 4px solid;
|
||||
}
|
||||
.addbor{
|
||||
|
||||
.addbor {
|
||||
border-bottom: 1px solid #f6f8f9;
|
||||
padding: 15px 40px;
|
||||
box-sizing: border-box;
|
||||
@ -241,7 +437,305 @@ data(){
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.er-box{
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
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%;
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user