瀏覽代碼

fix style

wolyshaw 3 年之前
父節點
當前提交
cbbfc63f3d

二進制
src/views/photo-detail/eye-disabled.png


二進制
src/views/photo-detail/eye.png


+ 19 - 8
src/views/photo-detail/index.vue

@@ -38,20 +38,20 @@
             <auth :auths="['photo/del']">
               <div v-if="editing" class="ctrl-bar">
                 <el-checkbox class="check" :label="item.id"></el-checkbox>
-                <i class="el-icon-view" :class="{active: views.includes(item.id)}" @click="setView(item)"></i>
+                <i class="icon-view" :class="{active: views.includes(item.id)}" @click="setView(item)"></i>
               </div>
               <div v-else class="ctrl-bar-view">
-                <el-tooltip effect="dark" content="设为封面" placement="top" :open-delay=".5">
-                  <i class="el-icon-picture-outline-round" @click="setCover(item)" v-if="mergeType === 'DEFAULT'"></i>
+                <!-- <el-tooltip effect="dark" content="设为封面" placement="top" :open-delay=".5"> -->
+                  <span style="color: #fff; font-size: 12px;cursor: pointer;" @click="setCover(item)" v-if="mergeType === 'DEFAULT'">设为封面</span>
                   <i v-else></i>
-                </el-tooltip>
+                <!-- </el-tooltip> -->
                 <el-tooltip effect="dark" :content="views.includes(item.id) ? '设为不可见' : '设为可见'" placement="top" :open-delay=".5">
-                  <i class="el-icon-view" :class="{active: views.includes(item.id)}" @click="setViewItem(item)"></i>
+                  <i class="icon-view" :class="{active: views.includes(item.id)}" @click="setViewItem(item)"></i>
                 </el-tooltip>
               </div>
             </auth>
             <el-image
-              :src="item.url"
+              :src="item.url + '@base@tag=imgScale&w=400'"
               class="img"
               fit="contain"
               :preview-src-list="list.map(item => item.url)">
@@ -258,7 +258,8 @@ export default {
 }
 .ctrl-bar,
 .ctrl-bar-view{
-  background-color: rgba(0, 0, 0, .45);
+  // background-color: rgba(0, 0, 0, .45);
+  background-image: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0.05));
   height: 30px;
   position: absolute;
   top: 0;
@@ -280,7 +281,17 @@ export default {
 //     visibility: visible;
 //   }
 // }
-.el-icon-view,
+.icon-view{
+  width: 23px;
+  height: 16px;
+  display: inline-block;
+  background: url('./eye-disabled.png') no-repeat center;
+  background-size: contain;
+  cursor: pointer;
+  &.active{
+    background-image: url('./eye.png');
+  }
+}
 .el-icon-picture-outline-round{
   font-size: 14px;
   color: #fff;

+ 1 - 1
src/views/resetTeaming/components/training-photos/group/index.vue

@@ -11,7 +11,7 @@
       </el-image> -->
       <el-image
         v-if="detail.coverUrl"
-        :src="detail.coverUrl"
+        :src="detail.coverUrl + '@base@tag=imgScale&w=400'"
         class="img"
         fit="contain"
       />

+ 9 - 16
src/views/resetTeaming/components/training-photos/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="btns">
       <auth :auths="['photoAlbum/add']"><el-button type="primary" @click="openForm()">新建相册</el-button></auth>
-      <auth :auths="['photoAlbum/batchUpdate']"><el-button type="primary" v-if="!sorting" @click="sorting = true">调整排序</el-button></auth>
+      <auth :auths="['photoAlbum/batchUpdate']"><el-button type="primary" v-if="!sorting" @click="startSort">调整排序</el-button></auth>
       <el-button type="primary" v-if="sorting" @click="setSort()">确定</el-button>
       <el-button type="primary" v-if="sorting" @click="stopSort()">取消</el-button>
     </div>
@@ -75,9 +75,11 @@
 import dayjs from 'dayjs'
 import draggable from 'vuedraggable'
 import { photoAlbumDel, photoAlbumQueryPage, photoAlbumUpdate } from './api'
+import cloneDeep from '@/helpers/deep-clone'
 import group from './group'
 import formPopup from './form'
 import uploadPopup from './upload'
+let cdetail = null
 export default {
   name: 'training-photos',
   components: {
@@ -122,24 +124,15 @@ export default {
         }
       })
     },
+    startSort() {
+      this.sorting = true
+      cdetail = cloneDeep(this.years)
+    },
     stopSort() {
       this.sorting = false
-      const changeKeys = Object.keys(this.changed)
-      for (const key in this.years) {
-        if (Object.hasOwnProperty.call(this.years, key)) {
-          const yearDetail = this.years[key];
-          for (const mkey in yearDetail) {
-            if (Object.hasOwnProperty.call(yearDetail, mkey)) {
-              const monDetail = yearDetail[mkey];
-              if (changeKeys.includes(mkey)) {
-                monDetail.sort((a, b) => a.order - b.order)
-              }
-            }
-          }
-        }
-      }
-      // this.list = this.list.sort((a, b) => a.order - b.order)
       this.changed = {}
+      this.years = cloneDeep(cdetail)
+      cdetail = null
     },
     async setSort() {
       try {