首页调整

src/assets/less/index.less

@@ -0,0 +1,9 @@
+.leftbox{
+    width: 33.33%;
+    float: left;
+    height: 100vh;
+
+    .keliu{
+        margin-top: 12rem;
+    }
+}

src/views/index.vue

@@ -1,7 +1,24 @@
 <template>
     <div id="index">
+        <!-- 左边 -->
+        <div class="leftbox">
+            <!-- 客流 -->
+            <div class="keliu">
+                <span class="kliu_title">客流趋势</span>
+                <div class="kliu_st">
+                    <span class="">年</span>
+                    <span class="">月</span>
+                    <span class="">日</span>
+                </div>
+                <!-- 柱状图 -->
+                <div class="tongjitu" id="homebar" style="height: 230px; width: 100%"></div>
+
+            </div>
+
+        </div>
+        <!-- 中间 -->
+        <!-- 右边 -->
 
-        总览的内容
     </div>
 </template>
 <script>
@@ -20,9 +37,6 @@ export default{
 
         if (len > 1) {
             cc.className = "btgym page_bg"
-        //    cc.className ="btgym"
-        // }else{
-        //     cc.classList.add("page_bg")
         }
         console.log("index vue:" + len)
         console.log(cc.classList)
@@ -30,6 +44,34 @@ export default{
 }
 </script>
 <style>
+.leftbox {
+    width: 33.33%;
+    float: left;
+    height: 100vh;
+}
+
+.leftbox .keliu{
+    background-image: url('../assets/index/left_t1_bg.png');
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: 0 0;
+    height: 1.2rem;
+    color: #b5b7c5;
+}
+.leftbox .keliu .kliu_title{
+    line-height: 0.88rem;
+    font-size: 0.48rem;
+    padding-left: 2.4rem;
+    display: block;
+    width: 40%;
+    float: left;
+}
+
+.leftbox .keliu .kliu_st{
+    width: 30%;
+    float: left;
+    line-height: 0.88rem;
+}
 .page_bg {
     clear: both;
     background-image: url('../assets/index/bg.jpg') !important;