修改样式

src/school/orchestra/compontent/photo-detail.module.less

@@ -12,9 +12,10 @@
     margin: 13px;
     width: calc(100% - 26px);
     color: var(--van-primary-text);
-    border-color: #fff;
+    border-color: #F67146;
     border-radius: 10px;
     font-size: 16px;
+    background: #FFF7F3;
   }
 
   .phoneContainer {
@@ -44,13 +45,14 @@
     .itemBorder .img::before {
       content: ' ';
       position: absolute;
-      border-radius: 10px;
-      border: 2px solid #64a9ff;
+      border-radius: 2px;
+      border: 2px solid #FF8057;
       z-index: 10;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
+      background: rgba(0, 0, 0, 0.3);
     }
 
     --van-checkbox-border-color: transparent;
@@ -59,15 +61,17 @@
     :global {
       .van-checkbox {
         position: absolute;
-        top: 16px;
+        top: 8px;
         right: 10px;
         z-index: 9;
         height: 25px;
+        z-index: 11;
       }
 
       .van-checkbox__icon--checked {
         .van-icon {
-          border-color: #64a9ff;
+          border-color: #FF8057;
+          color: #FF8057;
         }
       }
     }
@@ -132,4 +136,11 @@
     height: 100%;
     display: block;
   }
+}
+
+.btnCancelButton {
+  background: #CCCCCC;
+  border-color: #CCCCCC;
+  font-size: 16px;
+  color: #FFFFFF;
 }

src/school/orchestra/compontent/photo-detail.tsx

@@ -26,8 +26,8 @@ import styles from './photo-detail.module.less'
 import iconDelete from '../images/icon-delete.png'
 import umiRequest from 'umi-request'
 import { getOssUploadUrl } from '@/state'
-import checkboxCheck from '../images/icon-checkbox-active.png'
-import checkboxDefault from '@/common/images/icon-checkbox-default.png'
+import checkboxCheck from '../images/icon-red-active.png'
+import checkboxDefault from '../images/icon-red-default.png'
 import iconDown from '../images/icon-down.png'
 import html2canvas from 'html2canvas'
 import { promisefiyPostMessage } from '@/helpers/native-message'
@@ -330,9 +330,19 @@ export default defineComponent({
         <OSticky position="top">
           <OHeader title={(route.query.name as any) || ''}>
             {{
-              right: () => (
-                <Icon name={iconDelete} size={22} onClick={() => (state.isEdit = !state.isEdit)} />
-              )
+              right: () =>
+                !state.isEdit && (
+                  <Icon
+                    name={iconDelete}
+                    size={22}
+                    onClick={() => {
+                      state.isEdit = !state.isEdit
+                      if (!state.isEdit) {
+                        state.check = []
+                      }
+                    }}
+                  />
+                )
             }}
           </OHeader>
 
@@ -407,7 +417,19 @@ export default defineComponent({
 
         {state.isEdit && (
           <OSticky position="bottom">
-            <div class={'btnGroup'}>
+            <div class={'btnGroup btnMore'}>
+              <Button
+                onClick={() => {
+                  state.isEdit = !state.isEdit
+                  state.check = []
+                }}
+                type="default"
+                class={styles.btnCancelButton}
+                block
+                round
+              >
+                取消
+              </Button>
               <Button block round type="primary" onClick={onRemove}>
                 删除
               </Button>

src/school/orchestra/compontent/photo.module.less

@@ -39,9 +39,10 @@
 .addPhone {
   margin-top: 12px;
   color: var(--van-primary-text);
-  border-color: #fff;
+  border-color: #F67146;
   border-radius: 10px;
   font-size: 16px;
+  background: #FFF7F3;
 }
 
 .btnGroup {
@@ -58,6 +59,7 @@
   justify-content: space-between;
   flex-wrap: wrap;
   padding-bottom: 32px;
+  margin: 0 12px;
 
   .item {
     position: relative;
@@ -66,13 +68,13 @@
     .more {
       display: inline-block;
       position: absolute;
-      top: 18px;
-      right: 6px;
+      top: 130px;
+      right: 8px;
       background: url('../images/icon_more.png') center center no-repeat;
       background-size: contain;
       width: 24px;
       height: 24px;
-      z-index: 9;
+      z-index: 12;
     }
 
     .img {
@@ -81,8 +83,8 @@
       align-items: center;
       justify-content: center;
       background: #eaeaea;
-      width: 170px;
-      height: 170px;
+      width: 150px;
+      height: 150px;
       border-radius: 2px;
       overflow: hidden;
       background-color: #eaeaea;
@@ -90,8 +92,6 @@
       background-position: center;
       background-image: url('../images/icon-photo-default.png');
       z-index: 10;
-
-
     }
 
     .imgSection {

src/school/orchestra/compontent/photo.tsx

@@ -217,22 +217,21 @@ export default defineComponent({
         style={{ minHeight: `calc(100vh - ${props.height}px)` }}
       >
         <OSticky position="top">
-          <OHeader>
-            {{
-              right: () => (
-                <span
-                  class={styles.addPhotoTop}
-                  onClick={() => {
-                    state.photoName = ''
-                    state.status = true
-                    state.selectType = 'add'
-                  }}
-                >
-                  添加相册
-                </span>
-              )
-            }}
-          </OHeader>
+          <OHeader border={false} />
+          <div class={styles.btnGroup}>
+            <Button
+              icon="plus"
+              block
+              class={styles.addPhone}
+              onClick={() => {
+                state.photoName = ''
+                state.status = true
+                state.selectType = 'add'
+              }}
+            >
+              新建相册
+            </Button>
+          </div>
         </OSticky>
         {/* <Sticky position="top" offsetTop={props.height} style={{ width: '100%' }}>
           <Cell class={styles.select} center isLink onClick={() => (state.schoolStatus = true)}>

src/views/mine-orchestra/my-photo/index.module.less

@@ -18,16 +18,15 @@
 
 .photoItem {
   position: relative;
-  width: 49%;
-  margin-bottom: 12px;
+  margin: 0 12px 12px;
 
   .gridImg {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
-    height: calc(100vw / 2);
-    width: 100%;
+    width: 150px;
+    height: 150px;
     border-radius: 2px;
     overflow: hidden;
     position: relative;

src/views/mine-orchestra/photo-list/index.module.less

@@ -14,8 +14,8 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
-  height: calc(100vw / 2);
+  width: 150px;
+  height: 150px;
   border-radius: 2px;
   overflow: hidden;
   position: relative;
@@ -27,8 +27,7 @@
 
 .photoItem {
   position: relative;
-  width: 49%;
-  margin-bottom: 12px;
+  margin: 0 12px 12px;
 
   .iconImage {
     display: flex;

src/views/mine-orchestra/photo-list/index.tsx

@@ -115,6 +115,33 @@ export default defineComponent({
                     <div class={styles.gridDes}>{item.photoCount || 0}张</div>
                   </div>
                 ))}
+                {data.list.map((item: any, index: number) => (
+                  <div
+                    class={styles.photoItem}
+                    onClick={() => {
+                      router.push({
+                        path: '/photo-list-detail',
+                        query: {
+                          photoId: item.id
+                        }
+                      })
+                    }}
+                  >
+                    <div class={styles.imgSection}>
+                      <div
+                        class={styles.gridImg}
+                        style={
+                          item.coverUrl
+                            ? { backgroundImage: `url(${item.coverUrl})`, backgroundSize: 'cover' }
+                            : ''
+                        }
+                      ></div>
+                    </div>
+
+                    <div class={styles.gridName}>{item.name || ''}</div>
+                    <div class={styles.gridDes}>{item.photoCount || 0}张</div>
+                  </div>
+                ))}
               </div>
             </List>
           )}