save

king

2018-09-29 31573a0912c1971a9043b3f9294f643c7d60a2aa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
  <div class="tab-button">
    <div class="weui-tabbar">
      <a href="javascript:;" class="tabbar-item" @click="tabchange('service')">
        <div class="weui-tabbar__icon">
          <i class="fa fa-wechat"></i>
        </div>
        <p class="weui-tabbar__label">{{dict.customer_service}}</p>
      </a>
      <a href="javascript:;" class="tabbar-item" :class="{'active': status}" @click="tabchange('collect')">
        <div class="weui-tabbar__icon">
          <i class="fa" :class="{'fa-star-o': !status, 'fa-star': status}"></i>
        </div>
        <p class="weui-tabbar__label">{{status ? dict.collected : dict.collect}}</p>
      </a>
      <a href="javascript:;" class="tabbar-large-item" @click="tabchange('addcart')">
        <p class="tabbar-label-left">{{dict.add_cart}}</p>
      </a>
      <a href="javascript:;" class="tabbar-large-item" @click="tabchange('shopnow')">
        <p class="tabbar-label-right">{{dict.shop_now}}</p>
      </a>
    </div>
  </div>
</template>
 
<script>
import {dict, dictgoodsdetail} from '../store/dictionary'
export default {
  name: 'tabbutton',
  props: {
    status: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  data () {
    return {
      dict: {}
    }
  },
  methods: {
    tabchange (type) {
      this.$emit('tabchange', type)
    }
  },
  mounted: function () {
    Object.assign(this.dict, dict, dictgoodsdetail)
  }
}
</script>
 
<style scoped>
.weui-tabbar {
  position: fixed;
  max-width: 41.2rem;
}
.tabbar-item {
  width: 18%;
  text-align: center;
}
.tabbar-item.active .weui-tabbar__label, .tabbar-item.active i {
  color: red;
  opacity: 0.6;
}
.tabbar-large-item {
  width: 32%;
  font-size: 16px;
  text-align: center;
  padding-top: 4px;
}
.tabbar-large-item p {
  padding: 5px 0px;
}
.weui-tabbar__icon{
  width: 20px;
  height: 20px;
}
.weui-tabbar__icon .fa {
  font-size: 20px;
  position: relative;
  top: 5px;
}
.tabbar-label-left {
  color: #ffffff;
  border-radius: 20px 0px 0px 20px;
  background: -webkit-linear-gradient(left,#FF9305, #FFCA03); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FF9305, #FFCA03); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FF9305, #FFCA03); /* Firefox 3.6 - 15 */
  background: linear-gradient(right, #FF9305, #FFCA03); /* 标准的语法 */
}
.tabbar-label-right {
  color: #ffffff;
  border-radius: 0px 20px 20px 0px;
  background: -webkit-linear-gradient(left,#FF0F3E, #FF592E); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, #FF0F3E, #FF592E); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, #FF0F3E, #FF592E); /* Firefox 3.6 - 15 */
  background: linear-gradient(right, #FF0F3E, #FF592E); /* 标准的语法 */
}
</style>