w-front-end / select_good · Commits

Commit 8373615e1db665b14e430965e4983a39f6bb1965

Authored by zhiyangdu
1 parent 8d16924b

商品详情页新增一个标签

Inline Side-by-side
Showing 2 changed files with 106 additions and 61 deletions
src/components/columnCommodityListBox/columnCommodityListBox.less
  View file @8373615
... ... @@ -59,22 +59,35 @@
59 59 }
60 60 .content-box {
61 61 margin: 0 auto;
62   - width: 286px;
63   - .title {
64   - display: -webkit-box;
65   - margin-top: 20px;
66   - color: #333333;
67   - font-size: 26px;
68   - width: 100%;
69   - height: auto;
70   - line-height: 40px;
71   - -webkit-line-clamp: 2;
72   - /*! autoprefixer: off */
73   - -webkit-box-orient: vertical;
74   - /*! autoprefixer: on */
75   - text-overflow: ellipsis;
76   - overflow: hidden;
77   - }
  62 + width: 286px;
  63 + .title {
  64 + display: -webkit-box;
  65 + margin-top: 20px;
  66 + color: #333333;
  67 + font-size: 26px;
  68 + width: 100%;
  69 + height: auto;
  70 + line-height: 40px;
  71 + -webkit-line-clamp: 2;
  72 + /*! autoprefixer: off */
  73 + -webkit-box-orient: vertical;
  74 + /*! autoprefixer: on */
  75 + text-overflow: ellipsis;
  76 + overflow: hidden;
  77 + .yx_card{
  78 + width: 60px;
  79 + height: 30px;
  80 + line-height:30px;
  81 + background: #FFB035;
  82 + border-radius: 6px;
  83 + color:#ffffff;
  84 + font-weight: 500;
  85 + font-size: 22px;
  86 + text-align: center;
  87 + padding: 3px 8px;
  88 + margin-right:10px;
  89 + }
  90 + }
78 91 .coupon-box {
79 92 display: inline;
80 93 margin-top: 8px;
... ... @@ -103,7 +116,19 @@
103 116 }
104 117 .decimal {
105 118 font-size: 24px;
106   - }
  119 + }
  120 + // 原价
  121 + .original_price{
  122 + display: flex;
  123 + justify-content: flex-start;
  124 + align-items: baseline;
  125 + font-size: 40px;
  126 + font-weight: 400;
  127 + color: #B4B4B4;
  128 + line-height: 28px;
  129 + text-decoration: line-through;
  130 + transform: scale(0.5);
  131 + }
107 132 }
108 133 .right {
109 134 display: flex;
... ...
src/components/columnCommodityListBox/columnCommodityListBox.vue
  View file @8373615
... ... @@ -13,15 +13,25 @@
13 13 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
14 14 </div>
15 15 <div class="content-box">
16   - <div class="title">{{item.title}}</div>
  16 + <div class="title">
  17 + <!-- <span class="yx_card">严选</span> -->
  18 + {{item.title}}
  19 + </div>
17 20 <!-- <div class="coupon-box">
18 21 满180减10
19 22 </div> -->
20 23 <div class="price-box">
21 24 <div class="left">
  25 + <!-- 现价 -->
22 26 <div class="y">¥&nbsp;</div>
23 27 <div class="integer">{{getInteger(item.price)}}.</div>
24 28 <div class="decimal">{{getDecimal(item.price)}}</div>
  29 + <!-- 原价 -->
  30 + <div class="original_price">
  31 + <div class="y">¥&nbsp;</div>
  32 + <div class="integer">{{getInteger(item.prices)}}.</div>
  33 + <div class="decimal">{{getDecimal(item.prices)}}</div>
  34 + </div>
25 35 </div>
26 36 <div class="right">
27 37 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
... ... @@ -42,15 +52,25 @@
42 52 <img v-lazy="item.simg + SIGN.MIDDLE" class="img" />
43 53 </div>
44 54 <div class="content-box">
45   - <div class="title">{{item.title}}</div>
  55 + <div class="title">
  56 + <!-- <span class="yx_card">严选</span> -->
  57 + {{item.title}}
  58 + </div>
46 59 <!-- <div class="coupon-box">
47 60 满180减10
48 61 </div> -->
49 62 <div class="price-box">
50 63 <div class="left">
  64 + <!-- 现价 -->
51 65 <div class="y">¥&nbsp;</div>
52 66 <div class="integer">{{getInteger(item.price)}}.</div>
53 67 <div class="decimal">{{getDecimal(item.price)}}</div>
  68 + <!-- 原价 -->
  69 + <div class="original_price">
  70 + <div class="y">¥&nbsp;</div>
  71 + <div class="integer">{{getInteger(item.prices)}}.</div>
  72 + <div class="decimal">{{getDecimal(item.prices)}}</div>
  73 + </div>
54 74 </div>
55 75 <div class="right">
56 76 <img src="static/img/icon_add.png" class="icon-add" mode="widthFix" />
... ... @@ -65,56 +85,56 @@
65 85 </template>
66 86  
67 87 <script>
68   - export default {
69   - data() {
70   - return {
  88 +export default {
  89 + data () {
  90 + return {
71 91  
72   - };
73   - },
74   - props: ["columnLists"],
75   - computed: {
  92 + };
  93 + },
  94 + props: ["columnLists"],
  95 + computed: {
76 96  
77   - /**
78   - * 获取整数
79   - */
80   - getInteger() {
81   - return (number) => {
82   - return parseInt(number);
83   - }
84   - },
  97 + /**
  98 + * 获取整数
  99 + */
  100 + getInteger () {
  101 + return (number) => {
  102 + return parseInt(number);
  103 + }
  104 + },
85 105  
86   - /**
87   - * 获取小数
88   - */
89   - getDecimal() {
90   - return (number) => {
  106 + /**
  107 + * 获取小数
  108 + */
  109 + getDecimal () {
  110 + return (number) => {
91 111  
92   - // 拆分数字
93   - let numberArr = number.toString().split(".");
  112 + // 拆分数字
  113 + let numberArr = number.toString().split(".");
94 114  
95   - // 判断是否有效数部分
96   - if (numberArr.length === 2) {
97   - return numberArr[1];
98   - } else {
99   - return "00";
100   - }
101   - }
102   - }
103   - },
104   - methods: {
  115 + // 判断是否有效数部分
  116 + if (numberArr.length === 2) {
  117 + return numberArr[1];
  118 + } else {
  119 + return "00";
  120 + }
  121 + }
  122 + }
  123 + },
  124 + methods: {
105 125  
106   - /**
107   - * 跳转详情
108   - * @param {object} item [对象]
109   - */
110   - toDetail(item) {
111   - this.$emit("detail", item);
112   - }
113   - }
114   - }
  126 + /**
  127 + * 跳转详情
  128 + * @param {object} item [对象]
  129 + */
  130 + toDetail (item) {
  131 + this.$emit("detail", item);
  132 + }
  133 + }
  134 +}
115 135 </script>
116 136  
117 137 <!-- Add "scoped" attribute to limit CSS to this component only -->
118 138 <style rel="stylesheet/less" lang='less' scoped>
119   - @import './columnCommodityListBox';
  139 +@import './columnCommodityListBox';
120 140 </style>
... ...