素材库

src/assets/styles/adminIndex.scss

@@ -0,0 +1,274 @@
+// start
+.home_item {
+  height: 248px;
+  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 {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 33%;
+    display: inline-block;
+    height: 40px;
+
+    img {
+      cursor: pointer;
+      vertical-align: middle
+    }
+
+    span {
+      position: relative;
+      display: block;
+      width: 100%;
+      font-size: 12px;
+      text-align: center;
+      line-height: 40px;
+      color: #33a1fa;
+      cursor: pointer;
+
+      &:before {
+        content: "";
+        position: absolute;
+        left: 2px;
+        top: 50%;
+        width: 1px;
+        height: 18px;
+        margin-top: -9px;
+        background-color: #e2e6ee;
+      }
+    }
+  }
+}
+
+.page_add {
+  text-align: right;
+
+  .table_add {
+    padding: 0 24px;
+    height: 28px;
+    border-radius: 14px;
+    margin-top: 2px;
+  }
+}
+
+.form_item {
+  display: flex;
+  margin: 0 10px;
+
+  span {
+    display: block;
+    line-height: 32px;
+    font-size: 14px;
+    margin-right: 10px;
+    color: #333;
+  }
+}
+
+.list_table {
+  margin-top: 20px;
+}
+
+.col_flex {
+  display: flex;
+}
+
+.el-table {
+  color: #333;
+  font-size: 14px;
+
+  .el-button {
+    padding: 5px 8px;
+    border: none !important;
+  }
+
+  .delt_btn {
+    background-color: #ee5747 !important;
+  }
+
+  .stop_btn {
+    background-color: #faaf45 !important;
+  }
+
+  .record_btn {
+    background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
+  }
+}
+
+.el-dialog__body {
+  .el-form-item {
+    margin-bottom: 24px;
+  }
+
+  .el-form-item__label {
+    line-height: 40px;
+    color: #333;
+  }
+
+  .el-input__inner {
+    width: 336px;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  .el-range-separator {
+    line-height: 34px;
+  }
+
+  .el-date-editor {
+    width: 336px;
+  }
+}
+
+.el-dialog__header {
+  position: relative;
+  padding: 20px 0;
+  margin: 0 24px;
+  border-bottom: 1px solid #eee;
+
+  &::before {
+    content: "";
+    position: absolute;
+    left: -18px;
+    top: 50%;
+    width: 44px;
+    height: 47px;
+    margin-top: -24px;
+    background: url(../images/t-zs.png) no-repeat left center;
+    background-size: 100% 100%;
+  }
+
+  .el-dialog__title {
+    color: #000;
+  }
+
+  .el-dialog__headerbtn {
+    font-size: 20px;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+}
+
+.el-dialog__footer {
+  padding: 10px 0 40px 0;
+  text-align: center;
+
+  .dialog-footer {
+    .el-button {
+      font-size: 14px;
+      padding: 10px 36px;
+    }
+
+    .el-button--default {
+      color: #3a8aeb;
+      border-color: #3a8aeb;
+      margin-left: 40px;
+    }
+  }
+}
+
+.record_layer {
+  .el-dialog__body {
+    padding: 0 20px 30px 20px;
+    color: #333;
+  }
+}
+
+.item_list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.item_cont {
+  position: relative;
+  width: 166px;
+  height: 174px;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #f0f0f0;
+  border-radius: 6px;
+  margin: 0 10px 10px 0;
+
+  img {
+    display: block;
+    width: 164px;
+    height: 140px;
+  }
+
+  .radio_img {
+    width: 164px;
+    height: 140px;
+    background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
+    background-size: 98px 98px;
+  }
+
+  .item_format {
+    display: flex;
+    position: absolute;
+    left: 0;
+    bottom: 38px;
+
+    span {
+      display: block;
+      width: 47px;
+      height: 18px;
+      // padding: 2px 5px;
+      margin-left: 6px;
+      text-align: center;
+      background: #3a8aeb;
+      color: #fff;
+      font-size: 12px;
+      line-height: 18px;
+      border-radius: 9px;
+    }
+  }
+  .item_player {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 50px;
+    height: 50px;
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 50%;
+    margin: -25px 0 0 -25px;
+    z-index: 999;
+  }
+}
+
+.file_name {
+  height: 32px;
+  line-height: 32px;
+  padding: 0 10px;
+  font-size: 14px;
+  color: #333;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+// end

src/assets/styles/index.scss

@@ -6,6 +6,7 @@
 @import 'btn';
 @import 'eladmin';
 @import 'iconfont.css';
+@import 'adminIndex';
 
 body {
   height: 100%;
@@ -193,172 +194,3 @@ aside {
   z-index: 1000 !important;
 }
 
-// start
-.home_item {
-  height: 248px;
-  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 {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 33%;
-    display: inline-block;
-    height: 40px;
-    img {
-      cursor: pointer;
-      vertical-align: middle
-    }
-    span {
-      position: relative;
-      display: block;
-      width: 100%;
-      font-size: 12px;
-      text-align: center;
-      line-height: 40px;
-      color: #33a1fa;
-      cursor: pointer;
-      &:before {
-        content: "";
-        position: absolute;
-        left: 2px;
-        top: 50%;
-        width: 1px;
-        height: 18px;
-        margin-top: -9px;
-        background-color: #e2e6ee;
-      }
-    }
-  }
-}
-.page_add {
-  text-align: right;
-  .table_add{
-    padding: 0 24px;
-    height: 28px;
-    border-radius: 14px;
-    margin-top: 2px;
-  }
-}
-.form_item {
-  display: flex;
-  margin: 0 10px;
-
-  span {
-    display: block;
-    line-height: 32px;
-    font-size: 14px;
-    margin-right: 10px;
-    color: #333;
-  }
-}
-.list_table {
-  margin-top: 20px;
-}
-.col_flex {
-  display: flex;
-}
-.el-table{
-  color: #333;
-  font-size: 14px;
-  .el-button{
-    padding: 5px 8px;
-    border: none !important;
-  }
-  .delt_btn {
-    background-color: #ee5747 !important;
-  }
-  .stop_btn{
-     background-color: #faaf45 !important;
-  }
-  .record_btn{
-    background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
-  }
-}
-.el-dialog__body{
-  .el-form-item{
-    margin-bottom: 24px;
-  }
-  .el-form-item__label{
-    line-height: 40px;
-    color: #333;
-  }
-  .el-input__inner{
-    width: 336px;
-    height: 40px;
-    line-height: 40px;
-  }
-  .el-range-separator{
-    line-height: 34px;
-  }
-  .el-date-editor{
-    width: 336px;
-  }
-}
-.el-dialog__header{
-  position: relative;
-  padding: 20px 0;
-  margin: 0 24px;
-  border-bottom: 1px solid #eee;
-  &::before{
-    content: "";
-    position: absolute;
-    left: -18px;
-    top: 50%;
-    width: 44px;
-    height: 47px;
-    margin-top: -24px;
-    background: url(../images/t-zs.png) no-repeat left center;
-    background-size: 100% 100%;
-  }
-  .el-dialog__title{
-    color: #000;
-  }
-  .el-dialog__headerbtn{
-    font-size: 20px;
-    top: 50%;
-    right: 0;
-    transform: translateY(-50%);
-  }
-}
-.el-dialog__footer {
-  padding: 10px 0 40px 0;
-  text-align: center;
-  .dialog-footer{
-    .el-button{
-      font-size: 14px;
-      padding: 10px 36px;
-    }
-    .el-button--default{
-      color: #3a8aeb;
-      border-color: #3a8aeb;
-      margin-left: 40px;
-    }
-  }
-}
-.record_layer {
-  .el-dialog__body {
-    padding: 0 20px 30px 20px;
-    color: #333;
-  }
-}
-// end

src/views/device/index.vue

@@ -135,7 +135,7 @@
               <div class="item_format">
                 <span class="item_type">JPG</span>
               </div>
-              <div class="item_name">人工智能</div>
+              <div class="file_name">人工智能</div>
             </li>
           </ul>
           <h4>视频</h4>
@@ -146,7 +146,7 @@
                 <span class="item_type">Video</span>
                 <span class="item_time">03:00</span>
               </div>
-              <div class="item_name">防控疫情小贴士</div>
+              <div class="file_name">防控疫情小贴士</div>
             </li>
           </ul>
           <h4>音频</h4>
@@ -157,7 +157,7 @@
                 <span class="item_type">Video</span>
                 <span class="item_time">03:00</span>
               </div>
-              <div class="item_name">防控疫情小贴士</div>
+              <div class="file_name">防控疫情小贴士</div>
             </li>
           </ul>
         </div>
@@ -254,75 +254,9 @@ export default {
 .content_warp {
   padding-top: 16px;
   h4 {
-    margin: 0;
+    margin: 6px 0 16px 0;
     font-size: 16px;
     color: #333;
   }
 }
-.item_list {
-  display: flex;
-  flex-wrap: wrap;
-  .item_cont {
-    position: relative;
-    width: 166px;
-    height: 174px;
-    overflow: hidden;
-    background-color: #fff;
-    border: 1px solid #f0f0f0;
-    border-radius: 6px;
-    margin: 0 10px 10px 0;
-    img {
-      display: block;
-      width: 164px;
-      height: 140px;
-    }
-    .radio_img {
-      width: 164px;
-      height: 140px;
-      background: url(../../assets/images/t-yp.png) no-repeat #b3e8fa center;
-      background-size: 98px 98px;
-    }
-    .item_format {
-      display: flex;
-      position: absolute;
-      left: 0;
-      bottom: 38px;
-      span {
-        display: block;
-        width: 47px;
-        height: 18px;
-        // padding: 2px 5px;
-        margin-left: 6px;
-        text-align: center;
-        background: #3a8aeb;
-        color: #fff;
-        font-size: 12px;
-        line-height: 18px;
-        border-radius: 9px;
-      }
-    }
-    .item_name {
-      height: 32px;
-      line-height: 32px;
-      padding: 0 11px;
-      color: #333;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .item_player {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 50px;
-      height: 50px;
-      background: rgba(255, 255, 255, 0.5);
-      border-radius: 50%;
-      margin: -25px 0 0 -25px;
-      z-index: 999;
-    }
-  }
-}
 </style>

src/views/materialContent/index.vue

@@ -10,7 +10,7 @@
             图片
             <i class="emrgencyCount">1</i>
           </span>
-          图片
+          tp
         </el-tab-pane>
         <el-tab-pane name="third">
           <span slot="label">
@@ -28,6 +28,10 @@
         </el-tab-pane>
       </el-tabs>
     </div>
+    <div class="material_btn">
+      <el-button round type="primary" @click="handleUpload">上传列表</el-button>
+      <el-button round>多选</el-button>
+    </div>
   </div>
 </template>
 
@@ -44,6 +48,9 @@ export default {
   methods: {
     handleClick(tab, event) {
       console.log(tab, event)
+    },
+    handleUpload() {
+      this.$refs.MaterialList.UploadList()
     }
   }
 }
@@ -51,12 +58,16 @@ export default {
 
 <style lang="scss" scoped>
 .app-container {
-  padding: 6px 24px 20px 24px;
+  position: relative;
+  padding: 6px 0 20px 0;
   .content_warp {
     i {
       font-style: normal;
       color: #999;
     }
+    ::v-deep .el-tabs__header {
+      padding: 0 24px;
+    }
     ::v-deep .el-tabs__item {
       height: 48px;
       line-height: 48px;
@@ -68,5 +79,19 @@ export default {
       height: 1px;
     }
   }
+  .material_btn {
+    position: absolute;
+    right: 24px;
+    top: 13px;
+    .el-button {
+      padding: 0 20px;
+      height: 28px;
+      border-color: #3a8aeb;
+      &:last-child {
+        padding: 0 25px;
+        color: #3a8aeb;
+      }
+    }
+  }
 }
 </style>

src/views/materialContent/materialList/index.vue

@@ -1,30 +1,231 @@
 <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>
+    <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" @click="handleMkdir">创建文件夹</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>
+          <img src />
+        </div>
+        <p class="file_name">文件夹</p>
+      </div>
+      <div class="material_item item_cont">
+        <img src="@/assets/images/background.jpg" alt />
+        <div class="item_format">
+          <span class="item_type">JPG</span>
+        </div>
+        <div class="file_name">人工智能</div>
+      </div>
+      <div class="material_item item_cont">
+        <div class="radio_img"></div>
+        <div class="item_format">
+          <span class="item_type">Video</span>
+          <span class="item_time">03:00</span>
+        </div>
+        <div class="file_name">防控疫情小贴士</div>
       </div>
-      <p class="file_name">文件夹</p>
+    </div>
+    <!-- 创建文件夹layer -->
+    <div class="publish_layer">
+      <el-dialog
+        title="创建文件夹"
+        :close-on-click-modal="false"
+        :visible.sync="mkdirVisible"
+        width="616px"
+        height="384px"
+      >
+        <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
+          <el-form-item
+            label="文件夹名称"
+            prop="name"
+            :rules="[
+              { required: true, message: '请输入文件夹名称号', trigger: 'blur' }
+            ]"
+          >
+            <el-input v-model="form.account" style="width: 336px" />
+          </el-form-item>
+          <el-form-item label="封面" prop="file">
+            <el-upload action="#" list-type="picture-card" :auto-upload="false">
+              <!-- <i slot="default" class="el-icon-plus"></i> -->
+              <img src="@/assets/images/t-sc.png" alt />
+              <div slot="file" slot-scope="{file}">
+                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
+                <!-- <span class="el-upload-list__item-actions">
+                  <span
+                    class="el-upload-list__item-preview"
+                    @click="handlePictureCardPreview(file)"
+                  >
+                    <i class="el-icon-zoom-in"></i>
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleDownload(file)"
+                  >
+                    <i class="el-icon-download"></i>
+                  </span>
+                  <span
+                    v-if="!disabled"
+                    class="el-upload-list__item-delete"
+                    @click="handleRemove(file)"
+                  >
+                    <i class="el-icon-delete"></i>
+                  </span>
+                </span>-->
+              </div>
+            </el-upload>
+            <!-- <el-dialog :visible.sync="dialogVisible">
+              <img width="100%" :src="dialogImageUrl" alt />
+            </el-dialog>-->
+          </el-form-item>
+        </el-form>
+        <div slot="footer" class="dialog-footer">
+          <el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
+          <el-button round @click="crud.cancelCU">关闭</el-button>
+        </div>
+      </el-dialog>
+    </div>
+
+    <!-- 创建文件夹layer -->
+    <div class="publish_layer">
+      <!-- width="736px" -->
+      <el-dialog
+        title="上传列表"
+        :close-on-click-modal="false"
+        :visible.sync="uploadListVisible"
+        height="384px"
+      >
+        <!-- :status="percentage === 100 ? undefined : 'success'" -->
+        <el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
+          <el-table-column align="center" prop="name" label="文件名" />
+          <el-table-column align="center" prop="type" label="类型" />
+          <el-table-column align="center" prop="size" label="大小" />
+          <el-table-column align="center" prop="status" label="状态">
+            <template slot-scope="scope">
+              <div v-if="progressLoading" class="loadingModal" :style="{ 'height': '100%' }">
+                <el-progress
+                  :stroke-width="6"
+                  :percentage="percentage"
+                  :color="colors"
+                  :format="format"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column align="center" prop="handle" label="操作">
+            <template slot-scope="scope">
+              <el-button
+                type="primary"
+                round
+                class="on_off_btn"
+                @click="end(scope.$index, scope.row)"
+              >{{ loading_txt }}</el-button>
+              <el-button
+                type="info"
+                round
+                class="upload_delt"
+                @click="handleRecord(scope.$index, scope.row)"
+              >删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
+import crudUser from '@/api/system/user'
+import CRUD, { presenter, header, form, crud } from '@crud/crud'
+import { mapGetters } from 'vuex'
+const defaultForm = {
+  id: null,
+  name: '',
+  file: null
+}
 export default {
   name: 'MaterialList',
   components: {},
+  cruds() {
+    return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser } })
+  },
+  mixins: [presenter(), header(), form(defaultForm), crud()],
   data() {
     return {
-
+      mkdirVisible: false,
+      uploadListVisible: false,
+      loading_txt: '暂停',
+      progressLoading: true,
+      percentage: 0,
+      colors: '#1e9f4c',
+      // dialogImageUrl: '',
+      // dialogVisible: false,
+      // disabled: false
+      uploadData: [
+        {
+          id: '1',
+          name: '文件夹1',
+          type: 'vedio',
+          size: '3MB'
+        }
+      ]
     }
   },
+  computed: {
+    ...mapGetters([
+      'user'
+    ])
+  },
+  mounted: function () {
+    this.start()
+  },
   methods: {
+    handleMkdir() {
+      this.mkdirVisible = true
+    },
+    UploadList() {
+      this.uploadListVisible = true
+    },
+    format(percentage) {
+      return percentage === 100 ? '100%' : `${percentage}%`
+    },
+    start() {
+      const that = this
+      that.$nextTick(() => {
+        that.progressLoading = true
+        that.percentage = 0
+        that.timeStart = setInterval(() => {
+          if (that.percentage < 100) {
+            that.percentage += 1
+          }
+        }, 100)
+      })
+    },
+    // 进度条结束
+    end() {
+      this.loading_txt = '开始'
+      // const that = this
+      // that.percentage = 100
+      clearInterval(this.timeStart)
+      // setTimeout(() => {
+      //   that.progressLoading = false
+      // }, 300)
+    }
+    // handleRemove(file) {
+    //   console.log(file)
+    // },
+    // handlePictureCardPreview(file) {
+    //   this.dialogImageUrl = file.url
+    //   this.dialogVisible = true
+    // },
+    // handleDownload(file) {
+    //   console.log(file)
+    // }
   }
 }
 </script>
@@ -32,12 +233,13 @@ export default {
 <style lang="scss" scoped>
 .material_content {
   display: flex;
-
+  flex-wrap: wrap;
+  margin-left: 24px;
   .material_item {
     width: 174px;
     height: 182px;
     border-radius: 4px;
-    margin-right: 24px;
+    margin: 0 20px 20px 0;
   }
   .cont_upload {
     display: flex;
@@ -76,18 +278,38 @@ export default {
         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;
+  }
+
+  .item_cont {
+    border-color: #dcdde3;
+    img {
+      width: 100%;
+      height: 148px;
+    }
+    .radio_img {
+      width: 100%;
+      height: 148px;
     }
   }
 }
+::v-deep .el-table {
+  .el-button {
+    padding: 0 10px;
+    height: 24px;
+    &.on_off_btn {
+    }
+    &.upload_delt {
+      background-color: #f76b6b;
+    }
+  }
+}
+::v-deep .el-upload--picture-card {
+  width: 128px;
+  height: 120px;
+  background-color: #f2f7ff;
+}
+::v-deep .el-upload-list--picture-card .el-upload-list__item {
+  width: 128px;
+  height: 120px;
+}
 </style>