统计页面添加布局

guanqb

2023-03-10 530a78a71da4567e759e268047e4b46cb9082cca

 src/views/layout/index.vue

@@ -55,6 +55,13 @@
                        </div>
                    </div>
                </div>
                <div class="weather">
                    <span>{{ weather }}</span><span>{{ temperature}}&#8451</span>
                </div>
                <div class="userInfo">
                    <span>{{ userName }}</span>
                    <div class="exit"><img src="/img/exit.png" alt=""></div>
                </div>
            </div>
    </div>
    <div class="main-container">
@@ -75,11 +82,12 @@

<script>
import mapBox from '@/components/map/index.vue'
import { getWeather } from '@/api/layout/index.js'

export default {
  name: 'layout',
  components: {
    mapBox
    mapBox,
  },
  data(){
    return {
@@ -113,7 +121,10 @@
        userOn: false,
        isShowUserDetail: false,
        currentUrl: '/layout/statistics',
        time: "----年--月--日 --:--"
        time: "----年--月--日 --:--",
        weather:'',
        temperature:'',
        userName:'管理员',
    }
  },

@@ -148,6 +159,11 @@
      setInterval(this.getTime, 500);
    },

    // 天气组件
    currentWeather(){
        setInterval(this.getWeather, 60000);
    },

    // 时间组件
    getTime() {
      let yy = new Date().getFullYear();
@@ -171,6 +187,11 @@

  mounted() {
    this.currentTime();
    
    getWeather().then(res=>{
        this.weather = res.data.data.weather.weather
        this.temperature = res.data.data.weather.temp
    })
  },

  watch: {
@@ -245,6 +266,8 @@

        .menu-list.left {
            margin-left: 10px;
            // width: calc((100% - 450px)/2);
            justify-content: space-between;

            .nav-list {
                background: $menu-tab-bg-color;
@@ -253,9 +276,27 @@

        .menu-list.right {
            margin-right: 72px;
            // width: calc((100% - 450px)/2);
            justify-content: space-between;

            .nav-list {
                background: $menu-tab-bg-color;
            }

            .weather {
                width: 100px;
                font-size: 16px;
                span:first-child{
                    margin-right: 10px;
                }
            }

            .userInfo {
                font-size: 16px;
                display: flex;
                .exit {
                    margin-left: 10px;
                }
            }
        }

@@ -290,14 +331,12 @@
                    width: 100%;
                    cursor: default;
                    z-index: 999;
                    // transform: skew(58deg);

                    div {
                        height: 36px;
                        text-align: center;
                        line-height: 36px;
                        font-size: 16px;
                        // background: $bg-blue;
                        background: $menu-tab-bg-color;
                        cursor: pointer;
                        box-sizing: content-box;
@@ -414,18 +453,6 @@
        position: relative;
        width: 100%;
        height: 100%;

        .main-content {
            position: absolute;
            top: 60px;
            height: calc(100% - 60px);
            width: 400px;
            z-index: 99;
        }

        .main-content.take-back {
            width: 0px;
        }
    }
}
</style>