529 lines
12 KiB
Vue
529 lines
12 KiB
Vue
<!--积分-->
|
||
<template>
|
||
<div class="app-center">
|
||
<div class="center-left">
|
||
<div class="center-vh">
|
||
<div class="center-left-top">
|
||
<div class="vip-bottom" >
|
||
<div>会员登录</div>
|
||
</div>
|
||
</div>
|
||
<div class="center-left-hj">
|
||
<div class="hj-box" style="justify-content: left">油品:￥200.00</div>
|
||
<div class="hj-box" style="border-left: 1px solid #d1d1d4; border-right: 1px solid #d1d1d4;">商品:￥0.52</div>
|
||
<div class="hj-box" style="justify-content: flex-end">合计: ￥200.52</div>
|
||
</div>
|
||
<div class="center-left-hj">
|
||
<div>满减活动</div>
|
||
<div>-￥2.87</div>
|
||
</div>
|
||
<div class="center-left-th">
|
||
<div class="th-box">
|
||
<div>扫码支付</div>
|
||
<div class="bule">394.7</div>
|
||
</div>
|
||
<div class="th-box">
|
||
<div>找零</div>
|
||
<div class="bule">394.7</div>
|
||
</div>
|
||
<div class="th-box">
|
||
<div>加油员</div>
|
||
<div style="cursor: pointer;color: crimson" >加油员名称</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="bottom-posi">
|
||
<div class="center-left-wrap">
|
||
<div class="wrap-box" v-for="(item,index) in 3" :key="index">
|
||
|
||
<span>支付方式</span>
|
||
</div>
|
||
</div>
|
||
<div class="center-left-bottom">
|
||
<div>
|
||
<div class="bottom-price">￥349.78</div>
|
||
<div class="price-red">优惠合计：5.74元</div>
|
||
</div>
|
||
<div class="center-left-lv" >请先登录会员</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="center-right">
|
||
<div class="center-right-top">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane label="全部" name="first"></el-tab-pane>
|
||
<el-tab-pane label="车用品" name="second"></el-tab-pane>
|
||
<el-tab-pane label="优惠卡券" name="third"></el-tab-pane>
|
||
<el-tab-pane label="食品酒饮" name="fourth"></el-tab-pane>
|
||
<el-tab-pane label="数码家电" name="fourthf"></el-tab-pane>
|
||
<el-tab-pane label="其它礼品" name="fourthp"></el-tab-pane>
|
||
</el-tabs>
|
||
<div style="width: 200px; ">
|
||
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="wrap-right">
|
||
<div class="ts-box">
|
||
<div class="wrap-right-box" v-for="(item,index) in 17" :key="index">
|
||
<el-card shadow="hover">
|
||
<div class="box-six">
|
||
<img src="../../../assets/images/goods.png" >
|
||
</div>
|
||
<div class="box-four">
|
||
<div class="title-red">1000积分</div>
|
||
<div class="title-hui">库存:不限</div>
|
||
<div class="title-goods">
|
||
<el-tag type="danger" size="mini" effect="dark">加钱购</el-tag>
|
||
<span style="margin-left: 5px">商品名称</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="wrap-right-bottom">
|
||
<div class="chongzhi" > <i class="el-icon-refresh"></i> 重置</div>
|
||
<div style="display: flex;align-items: center">
|
||
<div class="ddjil">订单记录</div>
|
||
<div class="gwuc"> <i class="el-icon-shopping-cart-2"></i> <span style="margin-left: 5px">购物车</span></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Integral",
|
||
data(){
|
||
return{
|
||
activeName:'first',
|
||
input:''
|
||
}
|
||
},
|
||
methods:{
|
||
handleClick(tab, event){
|
||
console.log(tab, event);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-center{
|
||
width: 100%;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
height: 100vh;
|
||
}
|
||
.center-left{
|
||
width: 33%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
height: 98vh;
|
||
position: relative;
|
||
}
|
||
.bottom-posi{
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0px;
|
||
}
|
||
.center-app{
|
||
width: 33%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
/*background: white;*/
|
||
|
||
}
|
||
.center-right{
|
||
width: 65%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin: 0px 10px;
|
||
height: 98vh;
|
||
/*background: white;*/
|
||
}
|
||
.center-top{
|
||
width: 100%;
|
||
height: 86vh;
|
||
background: white;
|
||
margin-bottom: 10px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
position: relative;
|
||
|
||
}
|
||
.center-top-title{
|
||
box-sizing: border-box;
|
||
padding: 10px 0px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 1px solid #ececec;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.center-top-tab{
|
||
box-sizing: border-box;
|
||
padding: 15px 0px;
|
||
|
||
}
|
||
.center-top-input{
|
||
width: 100%;
|
||
height: 60px;
|
||
background: #f8f8f8;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
input{
|
||
width: 90%;
|
||
font-size: 18px;
|
||
border: none;
|
||
outline: none;
|
||
background-color:transparent;
|
||
}
|
||
|
||
}
|
||
.center-top-data{
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
margin-top: 10px;
|
||
|
||
|
||
/*background-color: #f8f8f8;*/
|
||
}
|
||
.center-top-of{
|
||
width: 100%;
|
||
/*background-color: #99a9bf;*/
|
||
height: 70vh;
|
||
overflow: auto;
|
||
|
||
|
||
}
|
||
.wrap-wrap{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.of-box{
|
||
width: 31%;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
background-color: #b4d5ff;
|
||
height: 110px;
|
||
padding: 10px;
|
||
color: #3e4f60;
|
||
}
|
||
.of-title{
|
||
font-weight: bold;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
margin: 13px;
|
||
}
|
||
.data-top{
|
||
width: 100%;
|
||
background-color: #ededed;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.data-top-box{
|
||
width: 100%;
|
||
/*background-color: #ededed;*/
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.data-top-three{
|
||
width: 55%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
.data-top-title{
|
||
width: 45%;
|
||
overflow: hidden;
|
||
}
|
||
.content-top-bottom{
|
||
position: absolute;
|
||
bottom:-16px;
|
||
width: 98%;
|
||
border-top: 1px solid #ececec;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
transform: translate(-50%,-50%);
|
||
left: 50%;
|
||
color: #2c3e50;
|
||
font-size: 18px;
|
||
box-sizing: border-box;
|
||
padding: 15px ;
|
||
background-color: white;
|
||
|
||
|
||
}
|
||
.center-left-top{
|
||
width: 100%;
|
||
background: #5393ff;
|
||
height: 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.center-vh{
|
||
/*height: 68vh;*/
|
||
}
|
||
.center-left-hj{
|
||
background: white;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
margin-bottom: 2px;
|
||
}
|
||
.center-left-th{
|
||
background: white;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
margin: 10px auto;
|
||
}
|
||
.center-left-wrap{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
/*margin-top: 280px;*/
|
||
}
|
||
.wrap-box{
|
||
width: 31%;
|
||
background: #ffffff;
|
||
border-radius: 8px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 10px;
|
||
|
||
}
|
||
.wrap-box :hover{
|
||
/*background: #00afff !important;*/
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 8px;
|
||
height: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #00afff;
|
||
cursor: pointer;
|
||
/*color: white;*/
|
||
}
|
||
|
||
.center-left-bottom{
|
||
width: 100%;
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.bottom-qk{
|
||
border: 1px solid #99a9bf;
|
||
box-sizing: border-box;
|
||
padding: 14px 20px;
|
||
border-radius: 50px;
|
||
color: #99a9bf;
|
||
margin: 15px 0px ;
|
||
}
|
||
.bottom-qd{
|
||
border: 1px solid #13ce66;
|
||
background: #13ce66;
|
||
box-sizing: border-box;
|
||
padding: 14px 20px;
|
||
border-radius: 50px;
|
||
color: #ffffff;
|
||
|
||
margin: 15px 10px ;
|
||
}
|
||
.bottom-gd{
|
||
border: 1px solid #5393ff;
|
||
background: #5393ff;
|
||
box-sizing: border-box;
|
||
padding: 14px 20px;
|
||
border-radius: 50px;
|
||
color: #ffffff;
|
||
|
||
margin: 15px 10px ;
|
||
}
|
||
|
||
.bottom-price{
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
}
|
||
.price-red{
|
||
color: red;
|
||
}
|
||
.center-left-lv{
|
||
width: 60%;
|
||
height: 80px;
|
||
background-color: #13ce66;
|
||
color: white;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 22px;
|
||
cursor: pointer;
|
||
}
|
||
.th-box{
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #f6f8f9;
|
||
box-sizing: border-box;
|
||
padding: 10px 0px;
|
||
}
|
||
.hj-box{
|
||
width: 33%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.bule{
|
||
font-weight: 700;
|
||
color: #5393ff !important;
|
||
}
|
||
.vip-bottom{
|
||
border: 1px solid #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 5px 15px;
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
cursor: pointer;
|
||
}
|
||
.center-right-top{
|
||
width: 100%;
|
||
background: white;
|
||
height: 75px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.wrap-right{
|
||
width: 100%;
|
||
height: 78vh;
|
||
background: white;
|
||
overflow: auto;
|
||
}
|
||
.ts-box{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.wrap-right-box{
|
||
width: 205px;
|
||
height: 270px;
|
||
/*margin-right: 10px;*/
|
||
/*margin-bottom: 10px;*/
|
||
margin: 5px;
|
||
}
|
||
.box-six{
|
||
width: 100%;
|
||
height: 160px;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
}
|
||
.title-red{
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: rgb(238, 59, 62);
|
||
}
|
||
.title-hui{
|
||
font-size: 14px;
|
||
/*font-weight: bold;*/
|
||
color: #999999;
|
||
margin: 5px 0px;
|
||
}
|
||
.title-goods{
|
||
font-size: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.wrap-right-bottom{
|
||
width: 100%;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
border-radius: 8px;
|
||
margin-top: 10px;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
justify-content: space-between;
|
||
}
|
||
.chongzhi{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
border: 1px solid #999999;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
|
||
}
|
||
.ddjil{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
padding: 10px 15px;
|
||
border: 1px solid #13ce66;
|
||
font-size: 20px;
|
||
background: #13ce66;
|
||
color: white;
|
||
margin: 8px 10px;
|
||
cursor: pointer;
|
||
}
|
||
.gwuc{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50px;
|
||
box-sizing: border-box;
|
||
padding: 10px 25px;
|
||
border: 1px solid #5393ff;
|
||
font-size: 20px;
|
||
background: #5393ff;
|
||
color: white;
|
||
margin: 8px 10px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|