?

底部欄

<template>

? <div class="tab">

? ? <div class="chart">

? ? ? <div class="circle">

? ? ? ? <img src="@/assets/SVG/shopping_cart.svg" alt="" @click="changeCart" />

? ? ? </div>

? ? </div>

? ? <p class="money">￥ {{goodsData}} </p>

? ? <p class="fee">另需配送費(fèi)￥4元</p>

? ? <p class="low">{{paySeic}} </p>

? </div>

</template>

<script>

import bus from "@/eventBus.js";

?

export default {

? name:'TabBar',

? data(){

? ? return{

? ? ? goodsData:0

? ? }

? },

? methods:{

? ? changeCart() {

? ? ? this.$store.commit("showCart");

? ? ?

? ? },

? },

? created(){

? ? bus.$on("shareComputed", (val) =>{

? ? ? this.goodsData = val;

? ? ?

? ? } );

? ? bus.$on('totalMony' ,(val) =>{

? ? ? this.goodsData = val;

? ? })

? },

? computed:{

? ? paySeic(){

? ? ? if(this.goodsData === 0){

? ? ? ? return ?`￥${20}元起送 `

? ? ? }

? ? ? else if(this.goodsData < 20){

? ? ? ? let index = 20 - this.goodsData

? ? ? ? return `還差￥${index}元起送 `

? ? ? ? }else{

? ? ? ? ? return `去結(jié)算`

? ? ? ? }

? ? }

? }

}

</script>

<style lang="less" scoped>

.tab {

? background-color: #141d27;

? height: 50px;

? width: 100%;

? position: fixed;

? bottom: 0;

? ?color: aliceblue;

? ?z-index: 61;

? .chart {

? ? position: absolute;

? ? top: -12px;

? ? width: 44px;

? ? height: 44px;

? ? left: 18px;

? ? border-radius: 50%;

? ? background-color: #141d27;

? ? .circle {

? ? ? position: absolute;

? ? ? left: 5px;

? ? ? top: 5px;

? ? ? width: 36px;

? ? ? line-height: 40px;

? ? ? text-align: center;

? ? ? height: 36px;

? ? ? border-radius: 50%;

? ? ? background-color: rgba(255, 255, 255, 0.4);

? ? ? img {

? ? ? ? width: 20px;

? ? ? ? height: 20px;

? ? }

? ? }

? }

? .money{

? ? ?position: absolute;

? ? ?left: 80px;

? ? ?bottom: 20px;

? ? font-size: 16px;

? ? font-weight:700;

? }

? .fee{

? ? ? width: 100px;

? ? ? margin-left: 140px;

? ? ? font-size:12px ;

? ? ? margin-top:15px ;

? ? ?

? }

? .low{

? ? ? right: 0;

? ? ? bottom: 0;

? ? ? height: 50px;

? ? ? width:90px ;

? ? ? line-height: 50px;

? ? ? position: absolute;

? ? ? text-align: center;

? ? ? background-color:rgba(255, 255, 255, 0.4) ;

? }

}

</style>

總結(jié)

以上是生活随笔為你收集整理的饿了么底部栏的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。