ele-usky-admin/src/views/middle.vue

<template>
  <div class="middle-container" :style="`background-image: url('${middleBackUrl}');`">
    <div class="middle-container-title">
      <img
      :src="`${middleLogo}`"
        height="46"
        style="position: relative; top: -2px"
      />
      {{middleTitle}}
    </div>
    <div class="middle-container-lists">
      <el-row>
        <el-col
          :xs="5"
          :md="3"
          :sm="4"
          :lg="3"
          :xl="3"
          class="list-one"
          v-for="item in middleList"
          :key="item"
        >
          <router-link :to="item.children[0].path">
            <div
              class="list-one-img"
              :style="`background-image:${
                item.children.length > 1
                  ? item.meta.backgroundImage
                  : item.children[0].meta.backgroundImage
              }`"
            >
              <img
                :src="`static/svgIcons/${
                  item.children.length > 1
                    ? item.meta.icon
                    : item.children[0].meta.icon
                }.svg`"
                alt=""
              />
            </div>
            <p>
              {{
                item.children.length > 1
                  ? item.meta.title
                  : item.children[0].meta.title
              }}
            </p>
          </router-link>
        </el-col>
      </el-row>
    </div>

    <div class="middle-container-tips">上海永天科技股份有限公司</div>
  </div>
</template>
<script>
// import * as api from '@/api/user.js'

import { useStore } from 'vuex'
import { defineComponent, onMounted ,ref} from 'vue'
import * as api from '@/api/user.js'

export default defineComponent({
  name: 'Middle',
  props: {
    // show_Dialog: Boolean,
    // dialogTitle: {
    //   type: String,
    //   default: '告警详情',
    // },
    // itemInfo: {
    //   type: Object,
    //   default: function () {
    //     return {}
    //   },
    // },
  },
  setup() {
    const store = useStore()

    const middleList = store.state.middleList
    const middleBackUrl=ref(require('@/assets/images/middle_background.png'))
    const middleLogo=ref(require('@/assets/logo2.png'))
    const middleTitle=ref('永天智慧电力平台')
    

    onMounted(() => {

      getMiddleConfig()



      var color = [
        'linear-gradient(135deg, #64c3f5, #5590e9)',
        'linear-gradient(135deg, #edb6b6, #edb6b6)',
        'linear-gradient(135deg, #b4d0b3, #6acf7c)',
        'linear-gradient(135deg, #e29d67, #d85f35)',
        'linear-gradient(135deg, #dea8b9, #d65ab6)',
        'linear-gradient(135deg, #eeda9e, #e4b166)',
        'linear-gradient(135deg, #97a6f0, #4361ee)',
        'linear-gradient(135deg, #89eee1, #56b1d2)',
        'linear-gradient(135deg, #eeda9e, #e4b166)',

      ]

      middleList.forEach((item, index) => {
        index
        if (item.children.length > 1) {
          item.meta.backgroundImage = color[index]
        } else {
          item.children[0].meta.backgroundImage = color[index]
        }
      })
      console.log('修改后的middleList')
      console.log(middleList)
    })
    
    //根据不同的域名，显示不同的title和背景图
    function getMiddleConfig() {
      api
        .getMiddleConfig({}) .then((requset) => {
          if (requset.status === 'SUCCESS') {
            //有返回值用返回值配置，无返回值用默认配置
            middleBackUrl.value = requset.data[0].middleBackUrl?requset.data[0].middleBackUrl:require('@/assets/images/middle_background.png')
            middleLogo.value = requset.data[0].middleLogo?requset.data[0].middleLogo:require('@/assets/logo2.png')
            middleTitle.value = requset.data[0].middleTitle?requset.data[0].middleTitle:'永天智慧电力平台'
          } else {
            alert(requset.msg)
          }
        })
    }
    return {
      middleList,
      getMiddleConfig,
      middleBackUrl,
      middleLogo,
      middleTitle
    }
  },
})
</script>
<style lang="less">
.middle-container {
  width: 100%;

  background: url('~@/assets/images/middle_background.png');
  background-size: cover;
  background-color: #000000b3;
  margin: 0 auto;
  padding-top: 100px;
  color: #fff;
  text-align: center;
  background-position: center center;
  min-height: 100vh;

  &-title {
    font-size: 46px;

    font-weight: bold;
    letter-spacing: 3px;

    width: 100%;
    text-align: center;
  }
  &-lists {
    width: 80%;
    margin: 0 auto;
    margin-top: 80px;
    .list-one {
      margin-bottom: 60px;
      p {
        color: #fff;
      }
      .list-one-img {
        cursor: pointer;
        width: 65px;
        height: 65px;
        // background: #5c88fa;
        background-image: linear-gradient(135deg, #64c3f5, #5590e9);
        line-height: 65px;
        border-radius: 22px;
        margin: 0 auto;
        margin-bottom: 14px;
        img {
          width: 60%;
          transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
          -webkit-transition: all 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
        }
        img:hover {
          transform: scale(1.15);
        }
      }
    }
  }
  //   &-form {
  //     width: calc(100% - 40px);
  //     min-width: 360px;
  //     height: 440px;
  //     padding: 4vh;
  //     margin-top: calc((100vh - 380px) / 2);
  //     margin-right: 20px;
  //     margin-left: 20px;
  //     background: url('~@/assets/login_images/login_form.png');
  //     background-size: 100% 100%;
  //     border-radius: 10px;
  //     box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
  //   }
  //   &-hello {
  //     font-size: 32px;
  //     color: #fff;
  //   }
  //   &-title {
  //     margin-bottom: 30px;
  //     font-size: 20px;
  //     color: #fff;
  //   }
  &-tips {
    position: fixed;
    bottom: @vab-margin;
    width: 100%;
    height: 40px;
    color: rgba(255, 255, 255, 0.856);
    text-align: center;
  }
  .ant-col {
    width: 100%;
    padding: 0 10px 0 10px;
  }
  .ant-input {
    height: 35px;
  }
  .ant-btn {
    width: 100%;
    height: 45px;
    border-radius: 99px;
  }
}
</style>
l