optimize Alert style

optimize Alert style

src/styles/components/alert.less

@@ -23,7 +23,7 @@
 
     &-desc {
         font-size: 12px;
-        color: @legend-color;
+        color: @text-color;
         line-height: 21px;
         display: none;
         text-align: justify;
@@ -84,7 +84,7 @@
 
     &-with-desc &-message {
         font-size: 14px;
-        color: @text-color;
+        color: @title-color;
         display: block;
     }
 

src/styles/themes/default/custom.less

@@ -17,6 +17,7 @@
 @body-background        : #fff;
 @font-family            : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
 @code-family            : Consolas,Menlo,Courier,monospace;
+@title-color            : #464c5b;
 @text-color             : #657180;
 @font-size-base         : 14px;
 @font-size-small        : 12px;

test/app.vue

@@ -36,6 +36,7 @@ li + li {
                 <li><a v-link="'/slider'">Slider</a></li>
                 <li><a v-link="'/step'">Step</a></li>
                 <li><a v-link="'/switch'">Switch</a></li>
+                <li><a v-link="'/alert'">Alert</a></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -70,6 +70,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/switch.vue'], resolve);
         }
+    },
+    '/alert': {
+        component: function (resolve) {
+            require(['./routers/alert.vue'], resolve);
+        }
     }
 });
 

test/routers/alert.vue

@@ -0,0 +1,37 @@
+<template>
+    <Alert show-icon>消息提示文案</Alert>
+    <Alert type="success" show-icon>成功提示文案</Alert>
+    <Alert type="warning" show-icon>警告提示文案</Alert>
+    <Alert type="error" show-icon>错误提示文案</Alert>
+    <Alert show-icon>
+        消息提示文案
+        <template slot="desc">消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案消息提示的描述文案</template>
+    </Alert>
+    <Alert type="success" show-icon>
+        成功提示文案
+        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
+    </Alert>
+    <Alert type="warning" show-icon>
+        警告提示文案
+        <template slot="desc">
+            警告的提示描述文案警告的提示描述文案警告的提示描述文案
+        </template>
+    </Alert>
+    <Alert type="error" show-icon>
+        错误提示文案
+        <span slot="desc">
+            自定义错误描述文案。
+        </span>
+    </Alert>
+    <Alert show-icon>
+        自定义图标
+        <Icon type="ios-lightbulb-outline" slot="icon"></Icon>
+        <template slot="desc">自定义图标文案自定义图标文案自定义图标文案自定义图标文案自定义图标文案</template>
+    </Alert>
+</template>
+<script>
+    import { Alert, Icon } from 'iview';
+    export default {
+        components: { Alert, Icon }
+    }
+</script>