增加图表JS

src/main/resources/static/css/user-center/dashboard.css

@@ -27,16 +27,53 @@ li{list-style:none}
     .user-header .header-ml .account{float: left;}
     .user-header .header-ml .account .name{line-height: 46px;font-size: 18px;font-weight: bold;color: #22272e;}
     .user-header .header-ml .account .msg{font-size: 14px;line-height: 22px;color: #22272e;}
-    .user-header .header-ml .account .msg span{color: #f94b4b;display: inline-block;float: left;margin-right: 8px;}
+    .user-header .header-ml .account .msg span{color: #22272e;display: inline-block;float: left;margin-right: 8px;}
+    .user-header .header-ml .account .msg .red{color: #f94b4b;font-style: normal;margin: 0 5px;}
     .user-header .header-ml .account .msg a{display: inline-block;width: 64px;height: 22px;float: left;line-height: 22px;color: #FFFFFF;font-size:12px;text-align: center; background-image: linear-gradient(225deg,#61686f 0%,#313a43 100%);border-radius: 2px;}
-    .user-header .header-mr{width: 80px;height:80px;float: right;}
+    .user-header .header-mr{height:80px;float: right;}
+    .user-header .header-mr .message{width: 100%;float: right;height: 28px;}
+    .user-header .header-mr .message .icon{width: 28px;height: 28px;float: right;display: block;position: relative;}
+    .user-header .header-mr .message .icon:before{width: 28px;height: 28px;background-position: -240px -370px}
+    .user-header .header-mr .message .icon a{display: block;width: 18px;height: 18px;background-image: linear-gradient(90deg,#ff5353 0%,#ff2424 100%);position: absolute;top: -9px;left: -9px;font-style: normal;font-size: 13px;color: #f94b4b;line-height: 18px;text-align: center;border-radius: 50%;color: #fff;}
+    .user-header .header-mr .money {width: 100%;height: 52px;line-height: 52px;font-size: 16px;}
+    .user-header .header-mr .money span{color: #e15616;}
     .user-content{width: 100%;height: auto;margin-top: 27px;}
     .user-content .title{width: 100%;height: 44px;line-height: 44px;font-size: 16px;text-align: left;color: #22272e;}
     .user-content .section{width: 100%;height: auto;}
     .user-content .section .user-main{width: 100%;height:auto;background-color: #FFFFFF;box-sizing: border-box;padding: 20px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-bottom: 10px;}
-    .user-content .section .user-main.tabs{height: 78px;}
-    .user-content .section .user-main.order{height: 200px;}
-    .user-content .section .user-main.product{height: 253px;}
+    .user-content .section .user-main.tabs{height: 78px;padding: 15px 20px;}
+    .user-content .section .user-main .tabs-left{height: 100%;float: left;}
+    .user-content .section .user-main .tabs-left .item{width: 50px;height: 100%;float: left;margin:0 40px;}
+    .user-content .section .user-main .tabs-left .item a{width: 100%;height: 100%;display: block;}
+    .user-content .section .user-main .tabs-left .item a .icon{width: 24px;height: 24px;display: block;margin: 0 auto;position: relative;}
+    .user-content .section .user-main .tabs-left .item a .icon span{display: block;width: 18px;height: 18px;background-image: linear-gradient(90deg,#ff5353 0%,#ff2424 100%);position: absolute;top: -9px;left: -9px;font-style: normal;font-size: 13px;color: #f94b4b;line-height: 18px;text-align: center;border-radius: 50%;color: #fff;}
+    .user-content .section .user-main .tabs-left .item a .icon:before{width: 24px;height: 24px;background-position: -273px -370px;}
+    .user-content .section .user-main .tabs-left .item a p{font-size: 14px;color: #22272e;text-align: center;line-height: 20px;margin-top: 3px;}
+    .user-content .section .user-main .tabs-right{float: right;line-height: 48px;font-size: 14px;color: #22272e;}
+    .user-content .section .user-main.order{height: 224px;padding-left: 68px;padding-top: 10px;}
+    .user-content .section .user-main .order-title{width: 100%;height: 40px;position: relative;float: left;margin-bottom: 0;}
+    .user-content .section .user-main .order-title .bag{display: block;position: absolute;left: -45px;top: 12px; width: 36px;height: 16px;background-image: linear-gradient(335deg,#e15616 0%,#ffb496 100%);border-radius: 2px;font-size: 10px;color: #FFFFFF;line-height: 16px;text-align: center;}
+    .user-content .section .user-main .order-title .title-name{float: left;line-height:  40px;font-size: 14px;color: #22272e;}
+    .user-content .section .user-main .order-title .title-name p{float: left;margin-right: 10px;}
+    .user-content .section .user-main .order-title .title-name p.state{color: #E15616;}
+    .user-content .section .user-main .order-title .title-type{float: left;width: 40px;height: 40px;background: url("/img/order/second.png")center center no-repeat;background-size: cover;}
+    .user-content .section .user-main .order-title .title-time{float: right;line-height:  40px;font-size: 12px;color: #9aa5b5;}
+    .user-content .section .user-main .order-content{width: 100%;height: auto;float: left;}
+    .user-content .section .user-main .order-content .order-item{width: 100%;height: 36px;float: left;}
+    .user-content .section .user-main .order-content .order-item p{float: left;margin-right: 50px;line-height: 36px;color: #22272e;font-size: 14px;}
+    .user-content .section .user-main .order-content .order-item p span{margin-left: 5px;}
+    .user-content .section .user-main .order-content .order-item p .red{color: #f94b4b;}
+    .user-content .section .user-main .order-content .order-botton{width: 100%;height: 36px;float: left;margin-top: 8px;}
+    .user-content .section .user-main .order-content .order-botton .btn{width: 88px;height: 34px;border-radius: 2px;border: 1px solid #FFF;float: right;margin-left: 16px;font-size: 14px;line-height: 34px;text-align: center;display: block;}
+    .user-content .section .user-main .order-content .order-botton .btn.cancel{border-color: #9aa5b5;background-color: #FFFFFF;color: #22272e;}
+    .user-content .section .user-main .order-content .order-botton .btn.primary{border-color: #E15616;background-color: #E15616;color: #FFFFFF;}
+    .user-content .section .user-main.product{height: 260px;padding: 20px 20px 10px 20px;}
+    .user-content .section .user-main .product-item{width: 173px;height: auto;float: left;margin-right: 15px;cursor: pointer;}
+    .user-content .section .user-main .product-item:last-child{margin-right: 0;}
+    .user-content .section .user-main .product-item .product-img{width: 173px;height: 173px;float: left;}
+    .user-content .section .user-main .product-item .product-img img{width: 173px;height: 173px;display: block;}
+    .user-content .section .user-main .product-item .product-name{width: 100%;height: 40px;float: left;margin-top: 10px;}
+    .user-content .section .user-main .product-item .product-name p{font-size: 14px;color: #22272e;text-align: justify;line-height: 20px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;}
     .user-content .section .user-main.news{height: 207px;}
 
 

src/main/resources/static/js/user-center/dashboard.js

@@ -4,6 +4,14 @@ var helpSuggestion = new Vue({
     data: {
         btnLoading: false,
         userId: 0,
+        messageNum:'99+',
+        productList:[
+            {name:'华熙生物润百颜液体华熙生物润百颜',image:'https://img.caimei365.com/group1/M00/03/A9/Cmis217DrRiAFqp6AAfSTE-r1ow47.JPEG'},
+            {name:'华熙生物润百颜液体华熙生物润百颜',image:'https://img.caimei365.com/group1/M00/03/A9/Cmis217DrRiAFqp6AAfSTE-r1ow47.JPEG'},
+            {name:'华熙生物润百颜液体华熙生物润百颜',image:'https://img.caimei365.com/group1/M00/03/A9/Cmis217DrRiAFqp6AAfSTE-r1ow47.JPEG'},
+            {name:'华熙生物润百颜液体华熙生物润百颜',image:'https://img.caimei365.com/group1/M00/03/A9/Cmis217DrRiAFqp6AAfSTE-r1ow47.JPEG'},
+            {name:'华熙生物润百颜液体华熙生物润百颜/款',image:'https://img.caimei365.com/group1/M00/03/A9/Cmis217DrRiAFqp6AAfSTE-r1ow47.JPEG'}
+        ]
     },
     methods: {
         postSuggestion: function () {  // 账号登录

src/main/resources/templates/user-center/dashboard.html

@@ -27,29 +27,96 @@
                         <div class="logo"><img src="https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1884224890.jpg" alt=""></div>
                         <div class="account">
                             <div class="name">华熙生物信息技术有限公司</div>
-                            <div class="msg"><span>资料完整度:89%</span><a href="/user/setting/information.html">立即完善</a></div>
+                            <div class="msg"><span>资料完整度:<em class="red">89%</em></span><a href="/user/setting/information.html">立即完善</a></div>
                         </div>
                     </div>
                     <div class="header-mr">
-                        <div class="message"></div>
-                        <div class="money">余额:0.00元</div>
+                        <div class="message">
+                            <i class="icon mIcon"><a href="">{{messageNum}}</a></i>
+                        </div>
+                        <div class="money">余额: <span>0.00</span> 元</div>
                     </div>
                 </div>
                 <div class="user-content clear">
                     <div class="title">我的订单</div>
                     <div class="section">
-                        <div class="user-main tabs"></div>
-                        <div class="user-main order"></div>
+                        <div class="user-main tabs">
+                            <div class="tabs-left">
+                                <div class="item">
+                                    <a href="javascript:void(0);"><i class="icon mIcon" :class=""><span>3</span></i><p>待确认</p></a>
+                                </div>
+                                <div class="item">
+                                    <a href="javascript:void(0);"><i class="icon mIcon" :class=""><span>3</span></i><p>待付款</p></a>
+                                </div>
+                                <div class="item">
+                                    <a href="javascript:void(0);"><i class="icon mIcon" :class=""><span>3</span></i><p>待发货</p></a>
+                                </div>
+                                <div class="item">
+                                    <a href="javascript:void(0);"><i class="icon mIcon" :class=""><span>3</span></i><p>已发货</p></a>
+                                </div>
+                                <div class="item">
+                                    <a href="javascript:void(0);"><i class="icon mIcon" :class=""><span>3</span></i><p>退货/款</p></a>
+                                </div>
+                            </div>
+                            <div class="tabs-right"><a href="">全部订单<span class="icon mIcon"></span></a></div>
+                        </div>
+                        <div class="user-main order">
+                            <div class="order-title">
+                                <span class="bag">自主</span>
+                                 <div class="title-name">
+                                     <p>订单编号(标识)：C155382764847081(1002)</p>
+                                     <p class="state">待确认</p>
+                                 </div>
+                                <div class="title-type"></div>
+                                <div class="title-time">
+                                    <p>下单时间:2019-04-03 16:45</p>
+                                </div>
+                            </div>
+                            <div class="order-content">
+                                <div class="order-item">
+                                    <p>税费: <span>￥100000.00</span> </p>
+                                    <p>运费:<span>￥100000.00</span> </p>
+                                    <p>经理折扣:<span>￥10000.00</span> </p>
+                                    <p>促销满减:<span>￥100000.00</span> </p>
+                                    <p>赠品数:10</p>
+                                </div>
+                                <div class="order-item">
+                                    <p>订单总额:<span class="red">￥10000.00</span> </p>
+                                </div>
+                                <div class="order-item">
+                                    <p>应付总额:<span class="red">￥10000.00</span> </p>
+                                    <p>已支付:<span class="red">￥10000.00</span> </p>
+                                    <p>待付金额:<span class="red">￥10000.00</span> </p>
+                                </div>
+                                <div class="order-botton">
+                                    <a class="btn cancel" href="javascript: void(0);" @click="editGoodFn()">取消订单</a>
+                                    <a class="btn primary" href="javascript: void(0);"  @click="ItemDownshelf()">确认订单</a>
+                                    <a class="btn cancel" href="javascript: void(0);" @click="AddPushHotFn()">删除订单</a>
+                                    <a class="btn primary" href="javascript: void(0);"  @click="DeletePushHotFn()">查看物流</a>
+                                    <a class="btn primary" href="javascript: void(0);"  @click="DeletePushHotFn()">确认收货</a>
+                                    <a class="btn cancel" href="javascript: void(0);" @click="pageLinkDetils()">订单详情</a>
+                                    <a class="btn primary" href="javascript: void(0);" @click="pageLinkDetils()">支付订单</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="user-content">
                     <div class="title">今日推荐</div>
                     <div class="section">
-                        <div class="user-main product"></div>
+                        <div class="user-main product">
+                            <div class="product-item" v-for="(item, index) in productList" :key="index">
+                                <div class="product-img"><img :src="item.image" :alt="item.name"></div>
+                                <div class="product-name"><p>{{item.name}}</p></div>
+                            </div>
+                        </div>
                     </div>
                 </div>
                 <div class="user-content">
-                    <div class="title">最新动态</div>
+                    <div class="title">
+                        <p>最新动态</p>
+                        <p><a href="">全部动态</a></p>
+                    </div>
                     <div class="section">
                         <div class="user-main news"></div>
                     </div>