首页-素材库

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "canvasScreen-admin",
+  "name": "admin",
   "version": "2.6.0",
   "description": "canvasScreenAdmin",
   "author": "Liu Li",

src/assets/styles/iconfont.css

@@ -13,3 +13,9 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.font-icon {
+  width: 2em;
+  height: 2em;
+  fill: currentColor;
+  overflow: hidden;
+}

src/assets/styles/index.scss

@@ -133,7 +133,8 @@ aside {
   padding: 20px 24px;
   background-color: #fff;
   border-radius: 4px;
-  min-height: calc(100vh - 152px);
+  // min-height: calc(100vh - 152px);
+  min-height: calc(100vh - 116px);
 }
 
 .components-container {

src/assets/styles/sidebar.scss

@@ -4,6 +4,7 @@
     min-height: 100%;
     transition: margin-left .28s;
     margin-left: $sideBarWidth;
+    // padding-top: 64px;
     position: relative;
     background-color: #f5f5f5;
     .el-button--primary {

src/layout/components/AppMain.vue

@@ -6,7 +6,7 @@
       </keep-alive>
     </transition>
     <div v-if="$store.state.settings.showFooter" id="el-main-footer">
-      <span v-html="$store.state.settings.footerTxt" />
+      <span v-html="$store.state.settings.footerTxt"></span>
       <span>⋅</span>
       <a
         href="https://beian.miit.gov.cn/#/Integrated/index"
@@ -42,6 +42,16 @@ export default {
 .fixed-header + .app-main {
   padding-top: 64px;
 }
+
+.hasTagsView {
+  .app-main {
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header + .app-main {
+    padding-top: 84px;
+  }
+}
 </style>
 
 <style lang="scss">

src/layout/components/Navbar.vue

@@ -9,7 +9,7 @@
         <div class="avatar-wrapper">
           <!-- <p>{{user.phone}}</p> -->
           <p class="user_phone">13476289682</p>
-          <i class="el-icon-caret-bottom" />
+          <i class="el-icon-caret-bottom"></i>
         </div>
         <el-dropdown-menu slot="dropdown">
           <router-link to="/user/center">

src/layout/components/TagsView/index.vue

@@ -5,20 +5,27 @@
         v-for="tag in visitedViews"
         ref="tag"
         :key="tag.path"
-        :class="isActive(tag)?'active':''"
+        :class="isActive(tag) ? 'active' : ''"
         :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
         tag="span"
         class="tags-view-item"
         @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
+        @contextmenu.prevent.native="openMenu(tag, $event)"
       >
         {{ tag.title }}
-        <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        <span
+          v-if="!tag.meta.affix"
+          class="el-icon-close"
+          @click.prevent.stop="closeSelectedTag(tag)"
+        ></span>
       </router-link>
     </scroll-pane>
-    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
+    <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">刷新</li>
-      <li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">关闭</li>
+      <li
+        v-if="!(selectedTag.meta && selectedTag.meta.affix)"
+        @click="closeSelectedTag(selectedTag)"
+      >关闭</li>
       <li @click="closeOthersTags">关闭其他</li>
       <li @click="closeAllTags(selectedTag)">关闭全部</li>
     </ul>
@@ -192,11 +199,14 @@ export default {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
-  width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
+  height: 64px;
+  // width: 100%;
+  margin: 24px 24px 0 24px;
+  background: url("../../../assets/images/n-zs.png") no-repeat left top #fff;
+  background-size: 68px 24px;
+  // border-bottom: 1px solid #d8dce5;
+  // box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
+  border-radius: 4px;
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -222,7 +232,7 @@ export default {
         color: #fff;
         border-color: #42b983;
         &::before {
-          content: '';
+          content: "";
           background: #fff;
           display: inline-block;
           width: 8px;
@@ -245,7 +255,7 @@ export default {
     font-size: 12px;
     font-weight: 400;
     color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
     li {
       margin: 0;
       padding: 7px 16px;
@@ -268,10 +278,10 @@ export default {
       vertical-align: 2px;
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
       &:before {
-        transform: scale(.6);
+        transform: scale(0.6);
         display: inline-block;
         vertical-align: -3px;
       }

src/layout/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div :class="classObj" class="app-wrapper">
-    <div
+    <!-- <div
       v-if="device === 'mobile' && sidebar.opened"
       class="drawer-bg"
       @click="handleClickOutside"
-    />
+    />-->
     <sidebar class="sidebar-container" />
     <div class="main-container">
       <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
-        <!-- <tags-view v-if="needTagsView" /> -->
       </div>
+      <tags-view v-if="needTagsView" />
       <app-main />
       <right-panel v-if="showSettings">
         <settings />
@@ -21,7 +21,7 @@
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar } from './components'
+import { AppMain, Navbar, Settings, TagsView, Sidebar } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import Cookies from 'js-cookie'
@@ -30,6 +30,7 @@ export default {
   components: {
     AppMain,
     Navbar,
+    TagsView,
     RightPanel,
     Settings,
     Sidebar
@@ -40,7 +41,7 @@ export default {
       sidebar: state => state.app.sidebar,
       device: state => state.app.device,
       showSettings: state => state.settings.showSettings,
-      // needTagsView: state => state.settings.tagsView,
+      needTagsView: state => state.settings.tagsView,
       fixedHeader: state => state.settings.fixedHeader
     }),
     classObj() {

src/main.js

@@ -18,6 +18,8 @@ import permission from './components/Permission'
 import './assets/styles/element-variables.scss'
 // global css
 import './assets/styles/index.scss'
+/* 彩色iconfont */
+import './assets/icons/iconfont.js'
 
 // 代码高亮
 import VueHighlightJS from 'vue-highlightjs'

src/router/routers.js

@@ -128,7 +128,7 @@ export const constantRouterMap = [
       path: '/device',
       component: () => import('@/views/device/index'),
       meta: {
-        title: '设备管理',
+        title: '设备列表',
         icon: 'edit'
       }
     },
@@ -140,6 +140,22 @@ export const constantRouterMap = [
         icon: 'edit'
       }
     }]
+  },
+  {
+    path: '/content',
+    component: Layout,
+    meta: {
+      title: '内容管理',
+      icon: 'documentation'
+    },
+    children: [{
+      path: '/content',
+      component: () => import('@/views/materialContent/index'),
+      meta: {
+        title: '素材库',
+        icon: 'edit'
+      }
+    }]
   }
   // {
   //   path: '/user',

src/settings.js

@@ -6,7 +6,7 @@ module.exports = {
   /**
    * @description 是否显示 tagsView
    */
-  tagsView: true,
+  tagsView: false,
   /**
    * @description 固定头部
    */

src/views/dashboard/AgencyData.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="home_item">
     <div class="home_item_title">
-      <div class="icon iconfont">&#xe649;</div>
+      <svg class="font-icon icon1" aria-hidden="true">
+        <use xlink:href="#icon-jigouxinxi" />
+      </svg>
       <h4>机构数据</h4>
     </div>
     <div class="agency_warp">
@@ -51,6 +53,10 @@ export default {
 <style lang="scss" scoped>
 .home_item {
   // width: 448px;
+  .icon1 {
+    width: 17px;
+    height: 17px;
+  }
   .agency_warp {
     display: flex;
     justify-content: space-between;

src/views/dashboard/DeviceData.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="home_item">
     <div class="home_item_title">
-      <div class="icon iconfont">&#xe652;</div>
+      <svg class="font-icon icon1" aria-hidden="true">
+        <use xlink:href="#icon-shebeishuju" />
+      </svg>
       <h4>设备信息</h4>
     </div>
     <div class="device_info">
@@ -48,6 +50,11 @@ export default {
 .home_item {
   width: 536px;
   margin: 0 24px;
+  .icon1 {
+    width: 16px;
+    height: 13px;
+    margin-top: 2px;
+  }
   .device_info {
     display: flex;
     justify-content: space-between;

src/views/dashboard/PublishProcess.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="home_item">
     <div class="home_item_title">
-      <div class="icon iconfont">&#xe653;</div>
+      <svg class="font-icon icon1" aria-hidden="true">
+        <use xlink:href="#icon-fabuliucheng" />
+      </svg>
       <h4>发布流程</h4>
     </div>
     <div class="publish_step">
@@ -38,6 +40,10 @@ export default {
 <style lang="scss" scoped>
 .home_item {
   width: 576px;
+  .icon1 {
+    width: 15px;
+    height: 16px;
+  }
   .publish_step {
     display: flex;
     justify-content: space-between;

src/views/login.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="login">
-    <div class="login_bg" />
+    <div class="login_bg"></div>
     <div class="login_cont">
       <el-form
         ref="loginForm"
@@ -10,7 +10,7 @@
         label-width="0px"
         class="login_form"
       >
-        <img src="../assets/images/login/logo.png" class="login_logo" alt />
+        <img src="@/assets/images/login/logo.png" class="login_logo" alt />
         <el-form-item prop="phone">
           <el-input v-model="loginForm.phone" type="text" auto-complete="off" placeholder="请输入手机号" />
         </el-form-item>
@@ -103,14 +103,14 @@ export default {
       redirect: undefined
     }
   },
-  watch: {
-    $route: {
-      handler: function (route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
+  // watch: {
+  //   $route: {
+  //     handler: function (route) {
+  //       this.redirect = route.query && route.query.redirect
+  //     },
+  //     immediate: true
+  //   }
+  // },
   created() {
     // 获取验证码
     this.getCode()

src/views/materialContent/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="app-container">
+    <div class="content_warp">
+      <el-tabs v-model="activeName" @tab-click="handleClick">
+        <el-tab-pane label="全部" name="first">
+          <MaterialList ref="MaterialList" />
+        </el-tab-pane>
+        <el-tab-pane name="second">
+          <span slot="label">
+            图片
+            <i class="emrgencyCount">1</i>
+          </span>
+          图片
+        </el-tab-pane>
+        <el-tab-pane name="third">
+          <span slot="label">
+            视频
+            <i class="emrgencyCount">1</i>
+          </span>
+          ship
+        </el-tab-pane>
+        <el-tab-pane name="fourth">
+          <span slot="label">
+            音频
+            <i class="emrgencyCount">1</i>
+          </span>
+          yinp
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+  </div>
+</template>
+
+<script>
+import MaterialList from './materialList/index'
+export default {
+  name: 'MaterialContent',
+  components: { MaterialList },
+  data() {
+    return {
+      activeName: 'first'
+    }
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  padding: 6px 24px 20px 24px;
+  .content_warp {
+    i {
+      font-style: normal;
+      color: #999;
+    }
+    ::v-deep .el-tabs__item {
+      height: 48px;
+      line-height: 48px;
+    }
+    ::v-deep .el-tabs__active-bar {
+      background-color: transparent !important;
+    }
+    ::v-deep .el-tabs__nav-wrap::after {
+      height: 1px;
+    }
+  }
+}
+</style>

src/views/materialContent/materialList/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="material_content">
+    <div class="material_item cont_upload">
+      <el-button class="cont_upload_btn" round type="primary">上传</el-button>
+      <el-button class="mkdir_btn" round type="primary">创建文件夹</el-button>
+    </div>
+    <div class="material_item folder">
+      <div class="icon_bg">
+        <svg class="font-icon icon" aria-hidden="true">
+          <use xlink:href="#icon-wenjianjia" />
+        </svg>
+      </div>
+      <p class="file_name">文件夹</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MaterialList',
+  components: {},
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.material_content {
+  display: flex;
+
+  .material_item {
+    width: 174px;
+    height: 182px;
+    border-radius: 4px;
+    margin-right: 24px;
+  }
+  .cont_upload {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-content: center;
+    border: 1px dashed #dcdde3;
+    background: #f2f7ff;
+    .el-button {
+      display: block;
+      width: 114px;
+      height: 34px;
+      padding: 0;
+      font-size: 14px;
+      border: none;
+    }
+    .cont_upload_btn {
+      background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
+    }
+    .mkdir_btn {
+      margin-left: 0;
+      margin-top: 16px;
+    }
+  }
+
+  .folder {
+    border: 1px solid #dcdde3;
+    .icon_bg {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 148px;
+      background: #fff5dd;
+      .icon {
+        width: 104px;
+        height: 89px;
+      }
+    }
+    .file_name {
+      padding: 0 10px;
+      font-size: 14px;
+      color: #333;
+      height: 32px;
+      line-height: 32px;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>

src/views/system/user/index.vue

@@ -277,7 +277,7 @@ export default {
     ])
   },
   created() {
-    this.crud.msg.add = '新增成功，默认密码：123456'
+    // this.crud.msg.add = '新增成功，默认密码：123456'
   },
   mounted: function () {
     const that = this