badge css done

packages/badge-group/index.js

@@ -0,0 +1,3 @@
+import BadgeGroup from '../badge/src/badge-group';
+
+export default BadgeGroup;

packages/badge/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/badge/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/badge/index.js

@@ -0,0 +1,3 @@
+import Badge from './src/badge';
+
+export default Badge;

packages/badge/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/badge/src/badge-group.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="z-badge-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-badge-group'
+};
+</script>

packages/badge/src/badge.vue

@@ -0,0 +1,23 @@
+<template>
+    <a class="z-badge" :class="{ 'is-select' : isSelected }" :href="url" @click="handleClick">
+      <div class="z-badge__active"></div>
+      <div v-if="info" class="z-badge__info">{{info}}</div>
+      {{value}}
+    </a>
+</template>
+<script>
+export default {
+  name: 'z-badge',
+  props: {
+    url: String,
+    value: String,
+    info: String,
+    isSelected: Boolean
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>

packages/zanui-css/src/badge.css

@@ -0,0 +1,71 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace z {
+    @b badge-group {
+        position: relative;
+        width: 85px;
+        &::after {
+          @mixin border-retina (top);
+        }
+    }
+    @b badge {
+        display: block;
+        overflow: hidden;
+        position: relative;
+        padding: 20px 15px;
+        box-sizing: border-box;
+        line-height: 14px;
+        background-color: $c-background;
+        color: $c-gray-darker;
+        font-size: 14px;
+        text-decoration: none;
+        white-space: nowrap;
+        @e active {
+            display: none;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 3px;
+            height: 100%;
+            background-color: #FF4444;
+        }
+        @e info {
+            position: absolute;
+            top: 2px;
+            right: 2px;
+            font-size: 10px;
+            transform:scale(0.8);
+            text-align: center;
+            box-sizing: border-box;
+            padding: 0 6px;
+            min-width: 18px;
+            height: 18px;
+            line-height: 18px;
+            border-radius: 9px;
+            background-color: #FF4444;
+            color: $c-white;
+        }
+        @when select {
+            font-weight: bold;
+            color: $c-black;
+            background-color: $c-white;
+            .z-badge__active {
+                display: block;
+            }
+            &::after {
+                @mixin border-retina (top);
+                @mixin border-retina (right);
+                @mixin border-retina (left);
+            }
+        }
+        &::after {
+          @mixin border-retina (bottom);
+        }
+        &:last-child {
+          &::after {
+            border-bottom: 0;
+          }
+        }
+    }
+}

packages/zanui-css/src/index.css

@@ -12,3 +12,4 @@
 @import './popup.css';
 @import './radio.css';
 @import './switch.css';
+@import './badge.css';