首页

.eslintrc.js

@@ -192,6 +192,15 @@ module.exports = {
     'object-curly-spacing': [2, 'always', {
       objectsInObjects: false
     }],
-    'array-bracket-spacing': [2, 'never']
+    'array-bracket-spacing': [2, 'never'],
+    "vue/html-self-closing": ["error", {
+        "html": {
+            "void": "always",
+            "normal": "never",
+            "component": "always"
+        },
+        "svg": "always",
+        "math": "always"
+    }],
   }
 }

src/assets/styles/index.scss

@@ -5,6 +5,7 @@
 @import 'sidebar';
 @import 'btn';
 @import 'eladmin';
+@import 'iconfont.css';
 
 body {
   height: 100%;
@@ -197,25 +198,22 @@ aside {
   padding: 0 18px;
   background: #fff;
   border-radius: 4px;
+  overflow: hidden;
   .home_item_title {
     display: flex;
     padding: 18px 0;
     border-bottom: 1px solid #eee;
-
     h4 {
       margin-left: 6px;
       font-size: 16px;
       color: #333333;
     }
-
     .iconfont {
       font-size: 16px;
       color: #3a8aeb;
     }
   }
 }
-
-
 .auth_code {
   position: relative;
   .login-code {

src/main.js

@@ -17,7 +17,6 @@ import checkPer from '@/utils/permission'
 import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 // global css
-import './assets/styles/iconfont.css'
 import './assets/styles/index.scss'
 
 // 代码高亮

src/settings.js

@@ -38,7 +38,7 @@ module.exports = {
   /**
    * 是否显示设置的底部信息
    */
-  showFooter: true,
+  showFooter: false,
   /**
    * 底部文字，支持html语法
    */

src/views/dashboard/AgencyData.vue

@@ -4,6 +4,33 @@
       <div class="icon iconfont">&#xe649;</div>
       <h4>机构数据</h4>
     </div>
+    <div class="agency_warp">
+      <div class="agency_info">
+        <p>
+          <span>当前版本：</span>普通版
+        </p>
+        <p>
+          <span>有效时间：</span>2023-12-31
+        </p>
+        <p>
+          <span>联系人：</span>周杰伦
+        </p>
+        <p>
+          <span>联系方式：</span>15100701025
+        </p>
+      </div>
+      <div class="agency_data">
+        <el-button type="primary" round class="upgrade_btn">升级</el-button>
+        <p>
+          屏幕数量：
+          <span class="agency_num1">1</span>/10
+        </p>
+        <p>
+          管理人员：
+          <span class="agency_num2">2</span>/10
+        </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -23,6 +50,37 @@ export default {
 </script>
 <style lang="scss" scoped>
 .home_item {
-  width: 412px;
+  // width: 448px;
+  .agency_warp {
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 22px 0 22px;
+    font-size: 14px;
+    line-height: 38px;
+    .agency_info {
+      p {
+        span {
+          display: inline-block;
+          width: 70px;
+          text-align: justify;
+          text-align-last: justify;
+        }
+      }
+    }
+    .agency_data {
+      .upgrade_btn {
+        width: 108px;
+        height: 38px;
+        font-size: 14px;
+        margin: 8px 0 26px 0;
+      }
+      .agency_num1 {
+        color: #09c3df;
+      }
+      .agency_num2 {
+        color: #ff5151;
+      }
+    }
+  }
 }
 </style>

src/views/dashboard/DeviceData.vue

@@ -8,7 +8,7 @@
       <div class="info_item info1">
         <span class="info_title">设备总数量</span>
         <div class="info_total">
-          <span class="info_num">1</span>
+          <span class="info_num">2</span>
           <span>台</span>
         </div>
       </div>
@@ -54,6 +54,7 @@ export default {
     padding: 18px 22px 0 22px;
     .info_item {
       position: relative;
+      font-size: 14px;
       width: 136px;
       height: 141px;
       padding: 19px 18px 24px 18px;
@@ -74,13 +75,14 @@ export default {
       .info_total {
         position: absolute;
         right: 18px;
-        bottom: 24px;
+        bottom: 12px;
         display: flex;
         // align-items: flex-end;
         span {
           display: block;
           &:last-child {
-            margin-top: 32px;
+            font-size: 12px;
+            margin-top: 38px;
           }
         }
         .info_num {

src/views/dashboard/PublishProcess.vue

@@ -37,7 +37,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .home_item {
-  width: 540px;
+  width: 576px;
   .publish_step {
     display: flex;
     justify-content: space-between;

src/views/dashboard/ThemeGallery.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="theme">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="为你推荐" name="1">
+        <div class="theme_img">
+          <img
+            v-for="(item, index) in 14"
+            :key="index"
+            src="@/assets/images/home/theme_Img_03.png"
+            alt
+          />
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="人工智能" name="2">人工智能</el-tab-pane>
+      <el-tab-pane label="党建文化" name="3">党建文化</el-tab-pane>
+      <el-tab-pane label="节日节气" name="4">节日节气</el-tab-pane>
+      <el-tab-pane label="艺术鉴赏" name="5">艺术鉴赏</el-tab-pane>
+      <el-tab-pane label="名人介绍" name="6">名人介绍</el-tab-pane>
+      <el-tab-pane label="摄影" name="7">摄影</el-tab-pane>
+      <el-tab-pane label="书法" name="8">书法</el-tab-pane>
+    </el-tabs>
+    <div class="home_publish_btn">
+      <el-button round>即时发布</el-button>
+      <el-button round type="primary">定时发布</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ThemeGallery',
+  data() {
+    return {
+      activeName: '1'
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.theme {
+  position: relative;
+  width: 100%;
+  background: #fff;
+  margin-top: 24px;
+  padding-top: 8px;
+  border-radius: 4px;
+  min-height: calc(100vh - 384px);
+  ::v-deep .el-tabs__header {
+    padding: 0 26px;
+  }
+  ::v-deep .el-tabs__item {
+    font-size: 16px;
+    height: 50px;
+    line-height: 50px;
+  }
+  ::v-deep .el-tabs__active-bar {
+    height: 3px;
+  }
+
+  .theme_img {
+    display: flex;
+    flex-wrap: wrap;
+    padding-left: 26px;
+    img {
+      display: block;
+      width: 200px;
+      height: 282px;
+      border: 1px solid #f0f0f0;
+      border-radius: 4px;
+      margin: 0 23px 24px 0;
+      overflow: hidden;
+    }
+  }
+  .home_publish_btn {
+    position: absolute;
+    top: 14px;
+    right: 26px;
+    .el-button {
+      padding: 8px 20px;
+      font-size: 14px;
+      color: #fff;
+      border: none;
+      &:first-child {
+        background: linear-gradient(to right, #fc8c6f, #fa544e);
+      }
+      &:last-child {
+        margin-left: 24px;
+      }
+    }
+  }
+}
+</style>

src/views/home.vue

@@ -12,6 +12,7 @@
           <agency-data />
         </el-col>
       </el-row>
+      <theme-gallery />
     </div>
   </div>
 </template>
@@ -20,12 +21,14 @@
 import PublishProcess from './dashboard/PublishProcess'
 import DeviceData from './dashboard/DeviceData'
 import AgencyData from './dashboard/AgencyData'
+import ThemeGallery from './dashboard/ThemeGallery'
 export default {
   name: 'Dashboard',
   components: {
     PublishProcess,
     DeviceData,
-    AgencyData
+    AgencyData,
+    ThemeGallery
   },
   data() {
     return {
@@ -41,5 +44,6 @@ export default {
   padding: 24px;
   background-color: #f5f5f5;
   position: relative;
+  min-height: calc(100vh - 64px);
 }
 </style>