首页 发现 帮助
注册 登录
shaogen1995
/
changshuBWG
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

up

shaogen1995 2 年之前
父节点
704c206531
当前提交
180c24e27f
共有 14 个文件被更改，包括 14960 次插入 和 862 次删除
分列视图 显示文件统计
  1. 二进制
      build/0d9c8caee30e55289bfe25d5a65064a.jpg
  2. 1 1
      index.html
  3. 14357 550
      package-lock.json
  4. 2 1
      package.json
  5. 4 0
      src/assets/style/reset.css
  6. 2 4
      src/configue/http.js
  7. 2 2
      src/main.js
  8. 203 53
      src/pages/cultural-relic/index.vue
  9. 54 25
      src/pages/cultural-relic/style.css
  10. 1 1
      src/pages/editPages/cultural-relic/index.vue
  11. 78 50
      src/pages/layout/aside.vue
  12. 11 5
      src/pages/scene/index.vue
  13. 185 127
      src/pages/user/index.vue
  14. 60 43
      src/pages/video/index.vue

二进制
build/0d9c8caee30e55289bfe25d5a65064a.jpg
查看文件


+ 1 - 1
index.html
查看文件 

@@ -8,7 +8,7 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
 
     <link rel="apple-touch-icon" sizes="180x180" href="static/img/favicon.ico">
 
     <link rel="icon" type="image/png" href="static/img/favicon.ico" sizes="192x192">
 
-    <title>常熟博物院</title>
 
+    <title>常熟博物馆</title>
 
   </head>
 
   <body>
 
     <div id="app"></div>

文件差异内容过多而无法显示
+ 14357 - 550
package-lock.json


+ 2 - 1
package.json
查看文件 

@@ -27,7 +27,8 @@
 
     "vue-cropper": "^0.5.5",
 
     "vue-router": "^3.0.1",
 
     "vue2-editor": "^2.10.2",
 
-    "vuedraggable": "^2.24.0"
 
+    "vuedraggable": "^2.24.0",
 
+    "vue-json-excel": "^0.3.0"
 
   },
 
   "devDependencies": {
 
     "autoprefixer": "^7.1.2",

+ 4 - 0
src/assets/style/reset.css
查看文件 

@@ -106,4 +106,8 @@ table th > .cell{
 
 
 textarea{
 
   height: 8rem!important;
 
+}
 
+
 
+.searInput input{
 
+  padding-right: 40px;
 
 }

+ 2 - 4
src/configue/http.js
查看文件 

@@ -8,10 +8,8 @@ let loading = ''
 
 
 // 配置请求域名
 
 let layoutBoxIsShow
 
-const serverName = isProduction ? '/zhoushan' : 'http://8.135.106.227:8002/zhoushan'
 
-// https://project.4dage.com/8002/
 
-// http://8.135.106.227:8002/
 
-// http://119.23.129.199:8100/
 
+const serverName = isProduction ? '/zhoushan' : 'http://8.135.106.227:8002/zhoushan' // 打包
 
+// const serverName = isProduction ? '/zhoushan' : 'http://192.168.20.55:8002/zhoushan' // 本地测试
 
 
 const exceptUrls = ['/login']

+ 2 - 2
src/main.js
查看文件 

@@ -4,8 +4,8 @@ import Vue from 'vue'
 
 import App from './App'
 
 import ElementUI from 'element-ui'
 
 import router from './router'
 
-import {base} from '@/configue/base'
 
-import {axios, serverName} from './configue/http'
 
+import { base } from '@/configue/base'
 
+import { axios, serverName } from './configue/http'
 
 import myCharts from '@/configue/myCharts.js'
 
 import Vue2Editor from 'vue2-editor'
 
 import '../theme/index.css'

+ 203 - 53
src/pages/cultural-relic/index.vue
查看文件 

@@ -7,43 +7,121 @@
 
         <div class="info-top">
 
           <div class="info-left">
 
             <span>按文物类别查看：</span>
 
-            <el-select style="width:100px;" v-model="typeId" placeholder="请选择">
 
+            <el-select
 
+              style="width: 100px"
 
+              v-model="typeId"
 
+              placeholder="请选择"
 
+            >
 
               <el-option label="全部" value=""></el-option>
 
-              <el-option v-for="(item,i) in plist" :key="i" :label="item.name" :value="item.id"></el-option>
 
+              <el-option
 
+                v-for="(item, i) in plist"
 
+                :key="i"
 
+                :label="item.name"
 
+                :value="item.id"
 
+              ></el-option>
 
             </el-select>
 
-            <span style="margin-left:20px;">按文物年代查看：</span>
 
-            <el-select style="width:180px; text-align:center;" v-model="timeId" placeholder="请选择">
 
+            <span style="margin-left: 20px">按文物年代查看：</span>
 
+            <el-select
 
+              style="width: 180px; text-align: center"
 
+              v-model="timeId"
 
+              placeholder="请选择"
 
+            >
 
               <el-option label="全部" value=""></el-option>
 
-              <el-option v-for="(item,i) in tlist" :key="i" :label="item.name" :value="item.id"></el-option>
 
+              <el-option
 
+                v-for="(item, i) in tlist"
 
+                :key="i"
 
+                :label="item.name"
 
+                :value="item.id"
 
+              ></el-option>
 
             </el-select>
 
-            <el-input style="width:220px;margin:0 20px;" v-model="inputKey" placeholder="请输入文物名称搜索"></el-input>
 
+            <el-input
 
+              class="searInput"
 
+              style="width: 190px; margin: 0 20px"
 
+              v-model="inputKey"
 
+              placeholder="请输入文物名称搜索"
 
+              maxlength="10"
 
+              show-word-limit
 
+            ></el-input>
 
+
 
+            <el-radio v-model="sortType" :label="0" style="margin-right: 10px"
 
+              >按默认排序</el-radio
 
+            >
 
+            <el-radio v-model="sortType" :label="1">按总浏览量排序</el-radio>
 
+
 
             <el-button type="primary" @click="getInformation">查找</el-button>
 
-            <el-button @click="inputKey=''">重置</el-button>
 
-            <el-select style="margin-left:20px;" @change="piliang" :value="'批量导入 '" placeholder="请选择" v-if="0">
 
-              <el-option
 
-                label="模板下载"
 
-                value="模板下载">
 
-              </el-option>
 
-              <el-option
 
-                label="批量导入"
 
-                value="批量导入">
 
-              </el-option>
 
+            <el-button @click="inputKey = ''">重置</el-button>
 
+            <el-select
 
+              style="margin-left: 20px"
 
+              @change="piliang"
 
+              :value="'批量导入 '"
 
+              placeholder="请选择"
 
+              v-if="0"
 
+            >
 
+              <el-option label="模板下载" value="模板下载"> </el-option>
 
+              <el-option label="批量导入" value="批量导入"> </el-option>
 
             </el-select>
 
-            <input @change="uploadChange" class="upload-btn" ref="upload" type="file">
 
+            <input
 
+              @change="uploadChange"
 
+              class="upload-btn"
 
+              ref="upload"
 
+              type="file"
 
+            />
 
           </div>
 
           <div class="info-right">
 
-            <el-button type="primary" @click="$router.push({name:'edit-cultural-relic',params:{type:0}})">新增文物</el-button>
 
+            <JsonExcel
 
+              style="display: inline-block;"
 
+              :before-generate="derive"
 
+              class="export-excel-wrapper"
 
+              :data="json_data"
 
+              :fields="json_fields"
 
+              :name="`文物清单.xls`"
 
+            >
 
+              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
 
+              <el-button type="primary">导出文物</el-button>
 
+            </JsonExcel>
 
+
 
+            <el-button
 
+              type="primary"
 
+              @click="
 
+                $router.push({
 
+                  name: 'edit-cultural-relic',
 
+                  params: { type: 0 },
 
+                })
 
+              "
 
+              >新增文物</el-button
 
+            >
 
           </div>
 
         </div>
 
         <div class="collection-con">
 
           <ul>
 
-            <li class="theme-color" @click="gotoShow(item)" v-for="(item,i) in tableData" :key="i">
 
+            <li
 
+              class="theme-color"
 
+              @click="gotoShow(item)"
 
+              v-for="(item, i) in tableData"
 
+              :key="i"
 
+            >
 
               <div class="li-img">
 
-                <el-image :fit="'cover'" style="width:100%;height:100%;" :src="'http://8.135.106.227:8002/'+item.pic"></el-image>
 
+                <el-image
 
+                  :fit="'cover'"
 
+                  style="width: 100%; height: 100%"
 
+                  :src="item.pic"
 
+                ></el-image>
 
                 <!-- <div class="liulan"><span>浏览量: {{Math.round(Math.random()*100000)}}</span> 点赞数: {{Math.round(Math.random()*1000)}}</div> -->
 
               </div>
 
-              <div>{{item.timeName}} {{item.typeName}} <span @click.stop="del(item)" class="del">删除</span></div>
 
-              <p>{{item.name}}</p>
 
+              <div class="txtTim">
 
+                <div class="txtTimLeft">
 
+                  {{ item.timeName }} {{ item.typeName }}
 
+                </div>
 
+                <div class="txtTimRight">
 
+                  <span class="el-icon-view"></span>
 
+                  <i> {{item.openNum}}</i>
 
+                  <span
 
+                    @click.stop="del(item)"
 
+                    class="del el-icon-delete"
 
+                  ></span>
 
+                </div>
 
+              </div>
 
+              <p>{{ item.name }}</p>
 
             </li>
 
           </ul>
 
         </div>
 
@@ -62,9 +140,8 @@
 
 </template>
 
 
 <script>
 
-// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
 
-// 例如：import 《组件名称》 from '《组件路径》';
 
-
 
+// 表格导出
 
+import JsonExcel from 'vue-json-excel'
 
 import MainTop from '@/components/main-top'
 
 import SearchBar from '@/components/search-bar'
 
 const crumbData = [
 
@@ -78,7 +155,8 @@ export default {
 
   // import引入的组件需要注入到对象中才能使用
 
   components: {
 
     MainTop,
 
-    SearchBar
 
+    SearchBar,
 
+    JsonExcel
 
   },
 
   data () {
 
     return {
 
@@ -92,7 +170,28 @@ export default {
 
       plist: [],
 
       tlist: [],
 
       typeId: '',
 
-      timeId: ''
 
+      timeId: '',
 
+      sortType: 0,
 
+      // 导出表格的数据
 
+      json_fields: {
 
+        文物名称: 'name', // 常规字段
 
+        文物类别: 'typeName', // 支持嵌套属性
 
+        分类年代: 'timeName',
 
+        文物排序: 'num',
 
+        文物介绍: 'description',
 
+        文物展示方式: 'type',
 
+        是否展示: 'state',
 
+        浏览量: 'openNum'
 
+      },
 
+      json_data: [],
 
+      json_meta: [
 
+        [
 
+          {
 
+            ' key ': ' charset ',
 
+            ' value ': ' utf- 8 '
 
+          }
 
+        ]
 
+      ]
 
     }
 
   },
 
   watch: {
 
@@ -104,6 +203,9 @@ export default {
 
     },
 
     inputKey () {
 
       this.refresh()
 
+    },
 
+    sortType () {
 
+      this.refresh()
 
     }
 
   },
 
   mounted () {
 
@@ -112,6 +214,47 @@ export default {
 
     this.refresh()
 
   },
 
   methods: {
 
+    // 点击导出
 
+    async derive () {
 
+      this.getInformation()
 
+      this.json_data = []
 
+      this.loading = true
 
+      // 封装获取列表的函数
 
+      let params = {
 
+        name: this.inputKey,
 
+        typeId: this.typeId,
 
+        timeId: this.timeId,
 
+        pageNum: this.currentPage,
 
+        pageSize: this.size,
 
+        sortType: this.sortType
 
+      }
 
+      const res = await this.$http({
 
+        method: 'post',
 
+        data: { ...params, pageNum: 1, pageSize: 9999 },
 
+        url: '/collection/list'
 
+      })
 
+      if (res.code === 0) {
 
+        if (res.data.list.length === 0) {
 
+          this.$message.warning('没有符合条件的数据')
 
+          this.loading = false
 
+          return
 
+        }
 
+        this.json_data = res.data.list.map((v) => {
 
+          return {
 
+            name: v.name,
 
+            typeName: v.typeName,
 
+            timeName: v.timeName,
 
+            num: v.num,
 
+            description: v.description,
 
+            type: v.type,
 
+            state: v.state === 0 ? '展示' : '不展示',
 
+            openNum: v.openNum
 
+          }
 
+        })
 
+        this.loading = false
 
+      } else this.$message.warning(res.msg)
 
+    },
 
+
 
     del (item) {
 
       let data = {
 
         id: item.id
 
@@ -120,29 +263,31 @@ export default {
 
         confirmButtonText: '确定',
 
         cancelButtonText: '取消',
 
         type: 'warning'
 
-      }).then(() => {
 
-        this.$http.post('/collection/deleteCollection', data).then(res => {
 
-          if (res.code === 0) {
 
-            this.$notify.success({
 
-              title: '提示',
 
-              message: '删除成功',
 
-              duration: 2000
 
-            })
 
-            this.refresh()
 
-          } else {
 
-            this.$notify.error({
 
-              title: '错误',
 
-              message: res.msg,
 
-              duration: 2000
 
-            })
 
-          }
 
+      })
 
+        .then(() => {
 
+          this.$http.post('/collection/deleteCollection', data).then((res) => {
 
+            if (res.code === 0) {
 
+              this.$notify.success({
 
+                title: '提示',
 
+                message: '删除成功',
 
+                duration: 2000
 
+              })
 
+              this.refresh()
 
+            } else {
 
+              this.$notify.error({
 
+                title: '错误',
 
+                message: res.msg,
 
+                duration: 2000
 
+              })
 
+            }
 
+          })
 
         })
 
-      }).catch(() => {
 
-        this.$message({
 
-          type: 'info',
 
-          message: '已取消删除'
 
+        .catch(() => {
 
+          this.$message({
 
+            type: 'info',
 
+            message: '已取消删除'
 
+          })
 
         })
 
-      })
 
     },
 
     async uploadChange (e) {
 
       let file = e.target.files[0]
 
@@ -151,18 +296,19 @@ export default {
 
       const res = await this.$http.post(
 
         '/collection/importCollection',
 
         formData,
 
-        {'Content-Type': 'multipart/form-data'})
 
+        { 'Content-Type': 'multipart/form-data' }
 
+      )
 
       if (res.code === 0) {
 
         this.$alert(`上传成功`, '提示', {
 
           confirmButtonText: '确定',
 
-          callback: action => {
 
+          callback: (action) => {
 
             this.refresh()
 
           }
 
         })
 
       } else {
 
         this.$alert(`上传失败，${res.msg}`, '提示', {
 
           confirmButtonText: '确定',
 
-          callback: action => {
 
+          callback: (action) => {
 
             this.refresh()
 
           }
 
         })
 
@@ -195,7 +341,10 @@ export default {
 
       this.tlist = result.data
 
     },
 
     gotoShow (item) {
 
-      this.$router.push({ name: 'show-cultural-relic', params: { id: item.id } })
 
+      this.$router.push({
 
+        name: 'show-cultural-relic',
 
+        params: { id: item.id }
 
+      })
 
     },
 
     goto (item) {
 
       window.localStorage.setItem('editCollection', JSON.stringify(item))
 
@@ -215,7 +364,8 @@ export default {
 
         typeId: this.typeId,
 
         timeId: this.timeId,
 
         pageNum: this.currentPage,
 
-        pageSize: this.size
 
+        pageSize: this.size,
 
+        sortType: this.sortType
 
       }
 
 
       let result = await this.$http({

+ 54 - 25
src/pages/cultural-relic/style.css
查看文件 

@@ -1,4 +1,4 @@
 
-.top-body{
 
+.top-body {
 
   border-top: .0625rem solid #e6e6e6;
 
   line-height: 1.5;
 
   padding: 0 1.25rem 1.25rem;
 
@@ -8,16 +8,17 @@
 
   margin: 1rem 0;
 
 }
 
 
-.upload-btn{
 
+.upload-btn {
 
   opacity: 0;
 
   width: 0;
 
 }
 
 
-.top-body .top-con{
 
+.top-body .top-con {
 
   font-weight: bold;
 
 }
 
-.table-title{
 
-  padding: 1rem 1rem 1rem 0 ;
 
+
 
+.table-title {
 
+  padding: 1rem 1rem 1rem 0;
 
   font-size: 1rem;
 
   color: #2d2d2d;
 
   border-bottom: 1px solid #ccc;
 
@@ -25,12 +26,12 @@
 
   justify-content: space-between;
 
 }
 
 
-.more{
 
+.more {
 
   color: #ec652d;
 
   cursor: pointer;
 
 }
 
 
-.top-right{
 
+.top-right {
 
   background-color: #ec652d;
 
   height: 3.5625rem;
 
   line-height: 3.5625rem;
 
@@ -41,12 +42,12 @@
 
   font-weight: bold;
 
 }
 
 
-.search-body{
 
+.search-body {
 
   background-color: #fff;
 
   margin: 1.25rem 0;
 
 }
 
 
-.interface-table{
 
+.interface-table {
 
   height: calc(100% - 17.1875rem);
 
   overflow-x: hidden;
 
   background-color: #fff;
 
@@ -54,7 +55,7 @@
 
   box-sizing: border-box;
 
 }
 
 
-.zan-con{
 
+.zan-con {
 
   display: flex;
 
   width: 100%;
 
   justify-content: space-around;
 
@@ -63,58 +64,58 @@
 
   font-size: 1.125rem;
 
 }
 
 
-.zan-con .line{
 
+.zan-con .line {
 
   height: 8rem;
 
   width: 1px;
 
   background: #ccc;
 
 }
 
 
-.zan-con .zan-contain{
 
+.zan-con .zan-contain {
 
   display: flex;
 
   justify-content: space-between;
 
   flex-direction: column;
 
 }
 
 
-.zan-con .zan-contain p{
 
+.zan-con .zan-contain p {
 
   font-size: 2.25rem;
 
 }
 
 
-.zan-con .zan-contain p:first-child{
 
+.zan-con .zan-contain p:first-child {
 
   font-size: .875rem;
 
   line-height: 1.5;
 
 }
 
 
-.zan-sub{
 
+.zan-sub {
 
   text-align: right;
 
   margin-top: 1.25rem;
 
   color: #a5a5a5;
 
   font-size: .875rem;
 
 }
 
 
-.table-interface{
 
+.table-interface {
 
   overflow-y: auto;
 
   overflow-x: hidden;
 
   height: calc(100% - 3rem);
 
 }
 
 
 
-.info-top{
 
+.info-top {
 
   padding: 20px 0;
 
   display: flex;
 
   justify-content: space-between;
 
   border-bottom: 1px #a5a5a5 solid;
 
 }
 
 
-.o-span{
 
+.o-span {
 
   cursor: pointer;
 
   color: rgb(7, 152, 244);
 
 }
 
 
-.collection-con{
 
+.collection-con {
 
   width: 100%;
 
 }
 
 
-.collection-con ul{
 
+.collection-con ul {
 
   display: flex;
 
   flex-wrap: wrap;
 
   margin-top: 20px;
 
@@ -134,18 +135,16 @@
 
   height: 200px;
 
   margin-bottom: 10px;
 
 }
 
-.collection-con ul .li-img > .liulan{
 
+
 
+.collection-con ul .li-img>.liulan {
 
   position: absolute;
 
   left: 10px;
 
   bottom: 10px;
 
   color: #fff;
 
 }
 
 
-.collection-con ul .del{
 
-  float: right;
 
-}
 
 
-.collection-con ul .li-img div span{
 
+.collection-con ul .li-img div span {
 
   margin-right: 10px;
 
 }
 
 
@@ -153,3 +152,33 @@
 
 .collection-con ul img {
 
   width: 100%;
 
 }
 
+
 
+.el-icon-delete {
 
+  font-size: 20px;
 
+}
 
+
 
+.el-icon-view {
 
+  font-size: 20px;
 
+}
 
+
 
+.txtTim {
 
+  display: flex;
 
+  justify-content: space-between;
 
+}
 
+
 
+.txtTim .txtTimLeft {
 
+  max-width: 200px;
 
+}
 
+
 
+.txtTimRight {
 
+  display: flex;
 
+  align-items: center;
 
+  height: 22px;
 
+}
 
+
 
+.txtTimRight i {
 
+  margin-right: 15px;
 
+  padding-left: 5px;
 
+  font-size: 14px;
 
+  font-style: normal;
 
+}

+ 1 - 1
src/pages/editPages/cultural-relic/index.vue
查看文件 

@@ -143,7 +143,7 @@
 
                 :before-upload="beforeAvatarUpload"
 
                 :on-success="upload_avatar_success"
 
                 >
 
-                <img v-if="form.unityPic" :src="'http://8.135.106.227:8002/'+form.unityPic" class="avatar">
 
+                <img v-if="form.unityPic" :src="form.unityPic" class="avatar">
 
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 
               </el-upload>
 
               <span class="wwtxt" style="color:#C0C4CC">建议上传最长边不超过1024的JPG格式图片</span>

+ 78 - 50
src/pages/layout/aside.vue
查看文件 

@@ -1,35 +1,61 @@
 
 <!--  -->
 
 <template>
 
-<div class="aside">
 
-  <div class="aside-list">
 
-    <!-- <div class="aside-item">
 
+  <div class="aside">
 
+    <div class="aside-list">
 
+      <!-- <div class="aside-item">
 
       <div :class="{active:activeIdx === -1}" @click="go(-1,'/')"><img :src="require('@/assets/img/01jk.png')" >首页</div>
 
       <div @click="go(0,'/message')" :class="{active:activeIdx === 0}">消息管理</div>
 
       <div @click="go(1,'/user-analysis')" :class="{active:activeIdx === 1}">数据统计</div>
 
     </div> -->
 
-    <div class="aside-item">
 
-      <div><img :src="require('@/assets/img/02fb.png')">工作管理</div>
 
-      <!-- <div @click="go(2,'/information')" :class="{active:activeIdx === 2}">资讯管理</div> -->
 
-      <!-- <div @click="go(3,'/display')" :class="{active:activeIdx === 3}">展示管理</div> -->
 
-      <div @click="go(4,'/cultural-relic')" :class="{active:activeIdx === 4}">文物库</div>
 
-      <div @click="go(11,'/scene')" :class="{active:activeIdx === 11}">场景管理</div>
 
-      <div @click="go(12,'/video')" :class="{active:activeIdx === 12}">视频管理</div>
 
-      <!-- <div @click="go(5,'/questionnaire')" :class="{active:activeIdx === 5}">问卷管理</div> -->
 
-
 
-    </div>
 
-    <div class="aside-item" >
 
-      <div><img :src="require('@/assets/img/03mg.png')">系统管理</div>
 
-      <div @click="go(6,'/user')" :class="{active:activeIdx === 6}">用户管理</div>
 
-      <div @click="go(7,'/work-log')" :class="{active:activeIdx === 7}">工作日志</div>
 
-      <div @click="go(8,'/modify')" :class="{active:activeIdx === 8}">密码修改</div>
 
-    </div>
 
-    <!-- <div class="aside-item" >
 
+      <div class="aside-item">
 
+        <div><img :src="require('@/assets/img/02fb.png')" />工作管理</div>
 
+        <!-- <div @click="go(2,'/information')" :class="{active:activeIdx === 2}">资讯管理</div> -->
 
+        <!-- <div @click="go(3,'/display')" :class="{active:activeIdx === 3}">展示管理</div> -->
 
+        <div
 
+          @click="go(4, '/cultural-relic')"
 
+          :class="{ active: activeIdx === 4 }"
 
+        >
 
+          文物库
 
+        </div>
 
+        <div @click="go(11, '/scene')" :class="{ active: activeIdx === 11 }">
 
+          场景管理
 
+        </div>
 
+        <div @click="go(12, '/video')" :class="{ active: activeIdx === 12 }">
 
+          视频管理
 
+        </div>
 
+        <!-- <div @click="go(5,'/questionnaire')" :class="{active:activeIdx === 5}">问卷管理</div> -->
 
+      </div>
 
+      <div class="aside-item">
 
+        <div><img :src="require('@/assets/img/03mg.png')" />系统管理</div>
 
+        <div
 
+          @click="go(6, '/user')"
 
+          :class="{ active: activeIdx === 6 }"
 
+          v-show="adminFlag"
 
+        >
 
+          用户管理
 
+        </div>
 
+        <div
 
+          @click="go(7, '/work-log')"
 
+          :class="{ active: activeIdx === 7 }"
 
+          v-show="adminFlag"
 
+        >
 
+          工作日志
 
+        </div>
 
+        <div
 
+          @click="go(8, '/modify')"
 
+          :class="{ active: activeIdx === 8 }"
 
+          v-show="!adminFlag"
 
+        >
 
+          密码修改
 
+        </div>
 
+      </div>
 
+      <!-- <div class="aside-item" >
 
       <div><img :src="require('@/assets/img/04fb.png')">高级管理</div>
 
       <div @click="go(9,'/role')" :class="{active:activeIdx === 9}">角色管理</div>
 
       <div @click="go(10,'/device')" :class="{active:activeIdx === 10}">设备管理</div>
 
     </div> -->
 
+    </div>
 
   </div>
 
-</div>
 
 </template>
 
 
 <script>
 
@@ -42,6 +68,7 @@ export default {
 
   data () {
 
     // 这里存放数据
 
     return {
 
+      adminFlag: false
 
       // activeIdx: 0
 
     }
 
   },
 
@@ -51,14 +78,11 @@ export default {
 
       get: function () {
 
         return this.$route.meta.index
 
       },
 
-      set: function () {
 
-      }
 
+      set: function () {}
 
     }
 
   },
 
   // 监控data中的数据变化
 
-  watch: {
 
-
 
-  },
 
+  watch: {},
 
   // 方法集合
 
   methods: {
 
     go (id, url) {
 
@@ -68,71 +92,75 @@ export default {
 
   },
 
   // 生命周期 - 创建完成（可以访问当前this实例）
 
   created () {
 
-
 
+    let userInfo = window.localStorage.getItem('userInfo') || ''
 
+    let tmp = ''
 
+    if (userInfo) {
 
+      tmp = JSON.parse(userInfo)
 
+    }
 
+    let adminFlag = tmp.role[0]
 
+    if (adminFlag === 'admin') {
 
+      this.adminFlag = true
 
+    }
 
   },
 
   // 生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted () {
 
-
 
-  }
 
-
 
+  mounted () {}
 
 }
 
 </script>
 
 
 <style scoped>
 
-.aside-list{
 
+.aside-list {
 
   width: 100%;
 
-
 
 }
 
 .aside-item {
 
-  padding: .625rem 0;
 
+  padding: 0.625rem 0;
 
 }
 
-.aside-item:last-child{
 
-  border-bottom:none;
 
+.aside-item:last-child {
 
+  border-bottom: none;
 
 }
 
 
-.aside-item div{
 
+.aside-item div {
 
   height: 2.75rem;
 
   line-height: 2.75rem;
 
-  margin: .0625rem auto;
 
+  margin: 0.0625rem auto;
 
   width: 80%;
 
   padding-left: 3.4375rem;
 
   cursor: pointer;
 
   color: rgba(0, 0, 0, 1);
 
 }
 
-.aside-item div:not(:first-child):hover{
 
-  background-color: #0B4362;
 
+.aside-item div:not(:first-child):hover {
 
+  background-color: #0b4362;
 
   border-radius: 80px;
 
   color: #fff;
 
 }
 
 
-.aside-item div:first-child{
 
+.aside-item div:first-child {
 
   padding-left: 1.8125rem;
 
   display: flex;
 
   align-items: center;
 
   color: #888888;
 
-  font-size: .75rem;
 
+  font-size: 0.75rem;
 
 }
 
 
-.aside-item div:first-child img{
 
+.aside-item div:first-child img {
 
   width: 1.1rem;
 
   height: 1.1rem;
 
-  margin-right: .625rem;
 
+  margin-right: 0.625rem;
 
 }
 
 
-.aside-item .active{
 
-  background-color: #0B4362;
 
+.aside-item .active {
 
+  background-color: #0b4362;
 
   border-radius: 80px;
 
   position: relative;
 
-  color: #fff!important;
 
+  color: #fff !important;
 
 }
 
-.aside-item .active::after{
 
-  content: '';
 
+.aside-item .active::after {
 
+  content: "";
 
   width: 40px;
 
   min-height: 40px;
 
   right: 0px;
 
   top: 50%;
 
   transform: translateY(-50%);
 
   position: absolute;
 
-  background:url('~@/assets/img/icon2s.png') no-repeat center center!important;
 
+  background: url("~@/assets/img/icon2s.png") no-repeat center center !important;
 
 }
 
 </style>

+ 11 - 5
src/pages/scene/index.vue
查看文件 

@@ -29,12 +29,11 @@
 
           </el-form>
 
         </div>
 
         <div class="conten">
 
+          <div class="numAll">总场景数：{{ list.length }}</div>
 
+
 
           <div class="box" v-for="item in list" :key="item.id">
 
             <a :href="item.urlScene">
 
-              <img
 
-                :src="'http://8.135.106.227:8002/' + item.thumb"
 
-                alt=""
 
-              />
 
+              <img :src="item.thumb" alt="" />
 
             </a>
 
             <div class="txt">
 
               <p>{{ item.name }}</p>
 
@@ -178,11 +177,18 @@ export default {
 
   width: 100%;
 
   min-height: 376px;
 
   padding: 25px;
 
+  position: relative;
 
+}
 
+.numAll {
 
+  position: absolute;
 
+  top: 5px;
 
+  right: 15px;
 
 }
 
 .box {
 
   cursor: pointer;
 
   width: 20%;
 
-  height: 205px;
 
+  min-height: 205px;
 
+  margin-bottom: 15px;
 
 }
 
 .box img {
 
   width: 90%;

+ 185 - 127
src/pages/user/index.vue
查看文件 

@@ -7,21 +7,27 @@
 
         <div class="info-top">
 
           <div class="info-left">
 
             <span>按用户状态查看：</span>
 
-            <el-select style="width:90px;" v-model="region" placeholder="请选择">
 
+            <el-select
 
+              style="width: 90px"
 
+              v-model="region"
 
+              placeholder="请选择"
 
+            >
 
               <el-option label="全部" value=""></el-option>
 
               <el-option label="启用" :value="0"></el-option>
 
               <el-option label="停用" :value="1"></el-option>
 
             </el-select>
 
             <el-input
 
-              style="width:220px;margin:0 20px;"
 
+              style="width: 220px; margin: 0 20px"
 
               v-model="inputKey"
 
               placeholder="请输入关键字搜索"
 
             ></el-input>
 
             <el-button type="primary" @click="getInformation">查找</el-button>
 
-            <el-button @click="inputKey=''">重置</el-button>
 
+            <el-button @click="inputKey = ''">重置</el-button>
 
           </div>
 
           <div class="info-right">
 
-            <el-button type="primary" @click="show('','add')">新增用户</el-button>
 
+            <el-button type="primary" @click="show('', 'add')"
 
+              >新增用户</el-button
 
+            >
 
           </div>
 
         </div>
 
         <el-table :data="tableData" style="width: 100%">
 
@@ -33,49 +39,90 @@
 
           >
 
             <template slot-scope="scope">
 
               <img
 
-                style="width:80px;height:80px;border-radius:50%;"
 
+                style="width: 80px; height: 80px; border-radius: 50%"
 
                 v-if="item.prop === 'head'"
 
                 :src="scope.row[item.prop]"
 
                 alt
 
               />
 
-              <span v-else>{{scope.row[item.prop]}}</span>
 
+              <span v-else>{{ scope.row[item.prop] }}</span>
 
             </template>
 
           </el-table-column>
 
           <el-table-column label="操作">
 
-            <template slot-scope="scope">
 
-              <span class="o-span" @click="show(scope.row,'edit')">修改</span>
 
-              <span class="o-span" @click="changeState(scope.row)">{{scope.row.qiyong==='启用'?'停用':'启用'}}</span>
 
+            <template
 
+              slot-scope="scope"
 
+              v-if="scope.row.roleName !== '超级管理员'"
 
+            >
 
+              <span class="o-span" @click="show(scope.row, 'edit')">修改</span>
 
+              <span class="o-span" @click="changeState(scope.row)">{{
 
+                scope.row.qiyong === "启用" ? "停用" : "启用"
 
+              }}</span>
 
               <span class="o-span" @click="del(scope.row)">注销</span>
 
             </template>
 
           </el-table-column>
 
         </el-table>
 
-         <div class="e-pagination">
 
-            <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="size" layout="prev, pager, next, jumper" :total="total">
 
-            </el-pagination>
 
-          </div>
 
+        <div class="e-pagination">
 
+          <el-pagination
 
+            @current-change="handleCurrentChange"
 
+            :current-page.sync="currentPage"
 
+            :page-size="size"
 
+            layout="prev, pager, next, jumper"
 
+            :total="total"
 
+          >
 
+          </el-pagination>
 
+        </div>
 
       </div>
 
     </div>
 
     <el-dialog :title="editTitle" :visible.sync="dialogFormVisible" width="40%">
 
       <div class="add-con">
 
         <div class="add-left">
 
           <el-form :model="form" :rules="rules" ref="form">
 
-            <el-form-item required prop="userName" label="用户账号：" :label-width="formLabelWidth">
 
-              <el-input :disabled="type==='edit'" v-model="form.userName" autocomplete="off"></el-input>
 
+            <el-form-item
 
+              required
 
+              prop="userName"
 
+              label="用户账号："
 
+              :label-width="formLabelWidth"
 
+            >
 
+              <el-input
 
+                :disabled="type === 'edit'"
 
+                v-model="form.userName"
 
+                autocomplete="off"
 
+              ></el-input>
 
             </el-form-item>
 
-            <el-form-item required label="用户角色：" :label-width="formLabelWidth">
 
+            <el-form-item
 
+              required
 
+              label="用户角色："
 
+              :label-width="formLabelWidth"
 
+            >
 
               <el-select v-model="form.roleId" placeholder="请选择角色">
 
-                <el-option v-for="item in roleList" :label="item.roleName" :key="item.id" :value="item.id"></el-option>
 
+                <el-option
 
+                  v-for="item in roleList"
 
+                  :label="item.roleName"
 
+                  :key="item.id"
 
+                  :value="item.id"
 
+                ></el-option>
 
               </el-select>
 
             </el-form-item>
 
-            <el-form-item required label="手机号码：" :label-width="formLabelWidth" prop="phone">
 
+            <el-form-item
 
+              required
 
+              label="手机号码："
 
+              :label-width="formLabelWidth"
 
+              prop="phone"
 
+            >
 
               <el-input v-model="form.phone" autocomplete="off"></el-input>
 
             </el-form-item>
 
             <el-form-item label="是否启用：" :label-width="formLabelWidth">
 
-               <el-radio-group v-model="form.state">
 
+              <el-radio-group v-model="form.state">
 
                 <el-radio :label="0">是</el-radio>
 
                 <el-radio :label="1">否</el-radio>
 
               </el-radio-group>
 
             </el-form-item>
 
+            <div
 
+              class="passTxt"
 
+              v-show="type === 'add'"
 
+              style="color: #f56c6c; padding: 0 0 0 40px"
 
+            >
 
+              初始密码：123456
 
+            </div>
 
           </el-form>
 
         </div>
 
         <!-- <div class="add-right">
 
@@ -232,32 +279,33 @@ export default {
 
         confirmButtonText: '确定',
 
         cancelButtonText: '取消',
 
         type: 'warning'
 
-      }).then(() => {
 
-        this.$http.post('/user/resetPassword', data).then(res => {
 
-          if (res.code === 0) {
 
-            this.$alert('重置成功', '提示', {
 
-              confirmButtonText: '确定',
 
-              callback: action => {
 
-              }
 
-            })
 
-          } else {
 
-            this.$notify.error({
 
-              title: '错误',
 
-              message: res.msg,
 
-              duration: 2000
 
-            })
 
-          }
 
+      })
 
+        .then(() => {
 
+          this.$http.post('/user/resetPassword', data).then((res) => {
 
+            if (res.code === 0) {
 
+              this.$alert('重置成功', '提示', {
 
+                confirmButtonText: '确定',
 
+                callback: (action) => {}
 
+              })
 
+            } else {
 
+              this.$notify.error({
 
+                title: '错误',
 
+                message: res.msg,
 
+                duration: 2000
 
+              })
 
+            }
 
+          })
 
         })
 
-      }).catch(() => {
 
-        this.$message({
 
-          type: 'info',
 
-          message: '已取消'
 
+        .catch(() => {
 
+          this.$message({
 
+            type: 'info',
 
+            message: '已取消'
 
+          })
 
         })
 
-      })
 
     },
 
     goto (item) {
 
       window.localStorage.setItem('editInfo', JSON.stringify(item))
 
-      this.$router.push({name: 'edit-information', params: {type: 1}})
 
+      this.$router.push({ name: 'edit-information', params: { type: 1 } })
 
       this.$bus.$emit('editinfo', item)
 
     },
 
     upload_success (data) {
 
@@ -279,58 +327,63 @@ export default {
 
         confirmButtonText: '确定',
 
         cancelButtonText: '取消',
 
         type: 'warning'
 
-      }).then(() => {
 
-        this.$http.post('/user/deleteUser', data).then(res => {
 
-          if (res.code === 0) {
 
-            this.$alert('注销成功', '提示', {
 
-              confirmButtonText: '确定',
 
-              callback: action => {
 
-                this.refresh()
 
-              }
 
-            })
 
-          } else {
 
-            this.$notify.error({
 
-              title: '错误',
 
-              message: res.msg,
 
-              duration: 2000
 
-            })
 
-          }
 
+      })
 
+        .then(() => {
 
+          this.$http.post('/user/deleteUser', data).then((res) => {
 
+            if (res.code === 0) {
 
+              this.$alert('注销成功', '提示', {
 
+                confirmButtonText: '确定',
 
+                callback: (action) => {
 
+                  this.refresh()
 
+                }
 
+              })
 
+            } else {
 
+              this.$notify.error({
 
+                title: '错误',
 
+                message: res.msg,
 
+                duration: 2000
 
+              })
 
+            }
 
+          })
 
         })
 
-      }).catch(() => {
 
-        this.$message({
 
-          type: 'info',
 
-          message: '已取消'
 
+        .catch(() => {
 
+          this.$message({
 
+            type: 'info',
 
+            message: '已取消'
 
+          })
 
         })
 
-      })
 
     },
 
     save () {
 
-      this.$refs['form'].validate().then(res => {
 
-        let {userName, roleId, phone, head, state} = this.form
 
-        let data = {userName, roleId, phone, head, state}
 
+      this.$refs['form'].validate().then((res) => {
 
+        let { userName, roleId, phone, head, state } = this.form
 
+        let data = { userName, roleId, phone, head, state }
 
 
-        this.$http.post(urlType[this.type], data).then(res => {
 
-          if (res.code === 0) {
 
-            this.$alert('操作成功', '提示', {
 
-              confirmButtonText: '确定',
 
-              callback: action => {
 
-                this.dialogFormVisible = false
 
-                this.refresh()
 
-              }
 
-            })
 
-          } else {
 
+        this.$http
 
+          .post(urlType[this.type], data)
 
+          .then((res) => {
 
+            if (res.code === 0) {
 
+              this.$alert('操作成功', '提示', {
 
+                confirmButtonText: '确定',
 
+                callback: (action) => {
 
+                  this.dialogFormVisible = false
 
+                  this.refresh()
 
+                }
 
+              })
 
+            } else {
 
+              this.$notify.error({
 
+                title: '错误',
 
+                message: res.message,
 
+                duration: 2000
 
+              })
 
+            }
 
+          })
 
+          .catch(() => {
 
             this.$notify.error({
 
               title: '错误',
 
-              message: res.message,
 
+              message: '添加失败',
 
               duration: 2000
 
             })
 
-          }
 
-        }).catch(() => {
 
-          this.$notify.error({
 
-            title: '错误',
 
-            message: '添加失败',
 
-            duration: 2000
 
           })
 
-        })
 
       })
 
     },
 
 
@@ -362,29 +415,31 @@ export default {
 
         confirmButtonText: '确定',
 
         cancelButtonText: '取消',
 
         type: 'warning'
 
-      }).then(() => {
 
-        this.$http.post('/user/updateState', data).then(res => {
 
-          if (res.code === 0) {
 
-            this.$alert('修改成功', '提示', {
 
-              confirmButtonText: '确定',
 
-              callback: action => {
 
-                this.refresh()
 
-              }
 
-            })
 
-          } else {
 
-            this.$notify.error({
 
-              title: '错误',
 
-              message: res.msg,
 
-              duration: 2000
 
-            })
 
-          }
 
+      })
 
+        .then(() => {
 
+          this.$http.post('/user/updateState', data).then((res) => {
 
+            if (res.code === 0) {
 
+              this.$alert('修改成功', '提示', {
 
+                confirmButtonText: '确定',
 
+                callback: (action) => {
 
+                  this.refresh()
 
+                }
 
+              })
 
+            } else {
 
+              this.$notify.error({
 
+                title: '错误',
 
+                message: res.msg,
 
+                duration: 2000
 
+              })
 
+            }
 
+          })
 
         })
 
-      }).catch(() => {
 
-        this.$message({
 
-          type: 'info',
 
-          message: '已取消'
 
+        .catch(() => {
 
+          this.$message({
 
+            type: 'info',
 
+            message: '已取消'
 
+          })
 
         })
 
-      })
 
     },
 
 
     async getInformation () {
 
@@ -407,7 +462,10 @@ export default {
 
       this.tableData = result.data.list
 
       this.total = result.data.total
 
       this.tableData.forEach((item, i) => {
 
-        item['date'] = this.$base.timestampToTime(item['startTime']) + '至' + this.$base.timestampToTime(item['endTime'])
 
+        item['date'] =
 
+          this.$base.timestampToTime(item['startTime']) +
 
+          '至' +
 
+          this.$base.timestampToTime(item['endTime'])
 
         item['role'] = juese[item['roleId']]
 
         item['qiyong'] = zt[item['state']]
 
         item['idx'] = i + 1 + (this.currentPage - 1) * this.size
 
@@ -422,7 +480,7 @@ export default {
 
         },
 
         url: '/user/roleList'
 
       })
 
-      this.roleList = res.data.filter(item => item.roleName !== '超级管理员')
 
+      this.roleList = res.data.filter((item) => item.roleName !== '超级管理员')
 
     },
 
     handleSearchBtnClick () {
 
       this.params.pageNum = 1
 
@@ -438,26 +496,26 @@ export default {
 
 </style>
 
 <style>
 
 .avatar-uploader .el-upload {
 
-    border: 1px dashed #d9d9d9;
 
-    border-radius: 6px;
 
-    cursor: pointer;
 
-    position: relative;
 
-    overflow: hidden;
 
-  }
 
-  .avatar-uploader .el-upload:hover {
 
-    border-color: #409EFF;
 
-  }
 
-  .avatar-uploader-icon {
 
-    font-size: 28px;
 
-    color: #8c939d;
 
-    width: 178px;
 
-    height: 178px;
 
-    line-height: 178px;
 
-    text-align: center;
 
-  }
 
-  .avatar {
 
-    width: 178px;
 
-    height: 178px;
 
-    display: block;
 
-  }
 
+  border: 1px dashed #d9d9d9;
 
+  border-radius: 6px;
 
+  cursor: pointer;
 
+  position: relative;
 
+  overflow: hidden;
 
+}
 
+.avatar-uploader .el-upload:hover {
 
+  border-color: #409eff;
 
+}
 
+.avatar-uploader-icon {
 
+  font-size: 28px;
 
+  color: #8c939d;
 
+  width: 178px;
 
+  height: 178px;
 
+  line-height: 178px;
 
+  text-align: center;
 
+}
 
+.avatar {
 
+  width: 178px;
 
+  height: 178px;
 
+  display: block;
 
+}
 
 </style>

+ 60 - 43
src/pages/video/index.vue
查看文件 

@@ -1,6 +1,7 @@
 
 <template>
 
   <div class="scene">
 
     <MainTop :crumb="[{ name: '视频管理' }]" />
 
+
 
     <div class="table-interface" style="flex: 1; overflow-y: auto">
 
       <div class="top-body">
 
         <div class="info-top">
 
@@ -15,32 +16,36 @@
 
               <el-input
 
                 v-model="ruleForm.name"
 
                 placeholder="请输入视频名称搜索"
 
-                style="width: 220px; margin-right: 10px;"
 
+                style="width: 220px; margin-right: 10px"
 
               ></el-input>
 
-              <el-button type="primary" @click="find"
 
-                >查找</el-button
 
-              >
 
+              <el-button type="primary" @click="find">查找</el-button>
 
               <el-button @click="reset">重置</el-button>
 
-                    <el-button style="float: right;" type="primary" @click="$router.push('/video/addVideo')"
 
+              <el-button
 
+                style="float: right"
 
+                type="primary"
 
+                @click="$router.push('/video/addVideo')"
 
                 >新增视频</el-button
 
               >
 
             </el-form-item>
 
           </el-form>
 
         </div>
 
         <div class="conten">
 
-          <div class="box" v-for="(item,index) in list" :key="item.id">
 
-            <video :src="'http://8.135.106.227:8002/'+item.urlVideo" controls v-if="item.isShow"></video>
 
-            <img :src="'http://8.135.106.227:8002/'+item.thumb"  alt="" @click="playVideo(index)" v-else>
 
+          <div class="numAll">总视频数：{{ list.length }}</div>
 
+
 
+          <div class="box" v-for="(item, index) in list" :key="item.id">
 
+            <video :src="item.urlVideo" controls v-if="item.isShow"></video>
 
+            <img :src="item.thumb" alt="" @click="playVideo(index)" v-else />
 
             <div class="txt">
 
-              <p>{{item.name}}</p>
 
-                <div>
 
-                  <span @click="$router.push(`/video/editVideo/${item.id}`)">编辑&nbsp;</span>
 
-                  <span @click="remove(item.id)">&nbsp;删除</span>
 
-                </div>
 
+              <p>{{ item.name }}</p>
 
+              <div>
 
+                <span @click="$router.push(`/video/editVideo/${item.id}`)"
 
+                  >编辑&nbsp;</span
 
+                >
 
+                <span @click="remove(item.id)">&nbsp;删除</span>
 
+              </div>
 
             </div>
 
           </div>
 
         </div>
 
-
 
       </div>
 
     </div>
 
   </div>
 
@@ -61,8 +66,7 @@ export default {
 
         name: ''
 
       },
 
       rules: {
 
-        name: [
 
-        ]
 
+        name: []
 
       },
 
       list: []
 
     }
 
@@ -92,29 +96,31 @@ export default {
 
         confirmButtonText: '确定',
 
         cancelButtonText: '取消',
 
         type: 'warning'
 
-      }).then(() => {
 
-        this.$http.get(`/video/remove/${id}`).then(res => {
 
-          if (res.code === 0) {
 
-            this.$notify.success({
 
-              title: '提示',
 
-              message: '删除成功',
 
-              duration: 2000
 
-            })
 
-            this.getList()
 
-          } else {
 
-            this.$notify.error({
 
-              title: '错误',
 
-              message: res.msg,
 
-              duration: 2000
 
-            })
 
-          }
 
+      })
 
+        .then(() => {
 
+          this.$http.get(`/video/remove/${id}`).then((res) => {
 
+            if (res.code === 0) {
 
+              this.$notify.success({
 
+                title: '提示',
 
+                message: '删除成功',
 
+                duration: 2000
 
+              })
 
+              this.getList()
 
+            } else {
 
+              this.$notify.error({
 
+                title: '错误',
 
+                message: res.msg,
 
+                duration: 2000
 
+              })
 
+            }
 
+          })
 
         })
 
-      }).catch(() => {
 
-        this.$message({
 
-          type: 'info',
 
-          message: '已取消删除'
 
+        .catch(() => {
 
+          this.$message({
 
+            type: 'info',
 
+            message: '已取消删除'
 
+          })
 
         })
 
-      })
 
     },
 
     // 获取视频列表
 
     async getList () {
 
@@ -123,7 +129,7 @@ export default {
 
         url: '/video/list'
 
       })
 
       this.list = result.data
 
-      this.list = this.list.map(v => {
 
+      this.list = this.list.map((v) => {
 
         return {
 
           ...v,
 
           isShow: false
 
@@ -136,7 +142,7 @@ export default {
 
     find () {
 
       if (!this.ruleForm.name) return this.$message.warning('不能为空')
 
       // console.log(this.list)
 
-      this.list = this.list.filter(v => {
 
+      this.list = this.list.filter((v) => {
 
         return v.name.includes(this.ruleForm.name)
 
       })
 
     }
 
@@ -158,7 +164,7 @@ export default {
 
 </script>
 
 <style scoped>
 
 .scene {
 
-    display: flex;
 
+  display: flex;
 
   flex-direction: column;
 
 }
 
 .table-interfac {
 
@@ -180,13 +186,21 @@ export default {
 
   width: 100%;
 
   min-height: 376px;
 
   padding: 25px;
 
+  position: relative;
 
+}
 
+.numAll {
 
+  position: absolute;
 
+  top: 5px;
 
+  right: 15px;
 
 }
 
 .box {
 
   cursor: pointer;
 
   width: 20%;
 
-  height: 205px;
 
+  min-height: 205px;
 
+  margin-bottom: 15px;
 
 }
 
-.box img,.box video {
 
+.box img,
 
+.box video {
 
   width: 90%;
 
   max-height: 160px;
 
 }
 
@@ -195,7 +209,10 @@ export default {
 
   display: flex;
 
   justify-content: space-between;
 
 }
 
-.txt>div {
 
+.txt p {
 
+  max-width: 160px;
 
+}
 
+.txt > div {
 
   padding-right: 30px;
 
 }
 
 </style>