首页调整

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,37 +1,79 @@
 <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>
 
-export default{
+export default {
 
-    data(){
-        return{
+    data() {
+        return {
             //
         }
     },
-    mounted(){
+    mounted() {
         let cc = window.document.getElementById("dv-full-screen-container")
         // 清除其他多余的classname
         let len = cc.classList.length
-        
-        if(len>1){
-            cc.className="btgym page_bg"
-        //    cc.className ="btgym"
-        // }else{
-        //     cc.classList.add("page_bg")
+
+        if (len > 1) {
+            cc.className = "btgym page_bg"
         }
-        console.log("index vue:"+len)
-       console.log(cc.classList)
+        console.log("index vue:" + len)
+        console.log(cc.classList)
     }
 }
 </script>
 <style>
-.page_bg{
+.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;
+    background-image: url('../assets/index/bg.jpg') !important;
 }
 </style>