更新

src/common/svg/arrow-active.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="5px" viewBox="0 0 9 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>三角形</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="筛选状态" transform="translate(-90.000000, -49.000000)" fill="#F67146">
+            <g id="筛选目录备份" transform="translate(30.000000, 41.000000)">
+                <path d="M64.8716471,8.41294119 L68.2489659,12.1655176 C68.4336954,12.3707726 68.4170562,12.6869176 68.2118012,12.8716471 C68.1199888,12.9542782 68.0008397,13 67.8773188,13 L61.1226812,13 C60.8465388,13 60.6226812,12.7761424 60.6226812,12.5 C60.6226812,12.3764791 60.668403,12.25733 60.7510341,12.1655176 L64.1283529,8.41294119 C64.3130824,8.20768618 64.6292274,8.19104698 64.8344824,8.37577649 C64.8475136,8.38750459 64.859919,8.39990996 64.8716471,8.41294119 Z" id="三角形" transform="translate(64.500000, 10.500000) rotate(-180.000000) translate(-64.500000, -10.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/common/svg/arrow.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="9px" height="5px" viewBox="0 0 9 5" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>三角形</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="筛选状态" transform="translate(-90.000000, -49.000000)" fill="#AAAAAA">
+            <g id="筛选目录备份" transform="translate(30.000000, 41.000000)">
+                <path d="M64.8716471,8.41294119 L68.2489659,12.1655176 C68.4336954,12.3707726 68.4170562,12.6869176 68.2118012,12.8716471 C68.1199888,12.9542782 68.0008397,13 67.8773188,13 L61.1226812,13 C60.8465388,13 60.6226812,12.7761424 60.6226812,12.5 C60.6226812,12.3764791 60.668403,12.25733 60.7510341,12.1655176 L64.1283529,8.41294119 C64.3130824,8.20768618 64.6292274,8.19104698 64.8344824,8.37577649 C64.8475136,8.38750459 64.859919,8.39990996 64.8716471,8.41294119 Z" id="三角形" transform="translate(64.500000, 10.500000) rotate(-180.000000) translate(-64.500000, -10.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/school/approval-manage/MyApproval.tsx

@@ -18,9 +18,13 @@ export default defineComponent({
     const show = ref(false)
     return () => (
       <div class={styles.MyApproval}>
-        <div class={styles.select} onClick={() => (show.value = true)}>
-          <span>{activeName.value}</span>
-          <img src={iconArrow} />
+        <div class={'searchGroup-single'}>
+          <span
+            class={['searchItem', show.value && 'searchItem-active']}
+            onClick={() => (show.value = true)}
+          >
+            {activeName.value}
+          </span>
         </div>
         <ActionSheet
           teleport="body"

src/school/approval-manage/subsidy/details.tsx

@@ -189,8 +189,9 @@ export default defineComponent({
                                     api: 'sourseMapApi',
                                     content: {
                                       type: 'display',
-                                      myPoint: item.schoolLongitudeLatitude,
-                                      orginPoint: item.signInLongitudeLatitude
+                                      myPoint: item.signInLongitudeLatitude,
+                                      orginPoint: item.schoolLongitudeLatitude,
+                                      limitDistance: item.scopeOfAttendance
                                     }
                                   })
                                 }}
@@ -257,8 +258,9 @@ export default defineComponent({
                                     api: 'sourseMapApi',
                                     content: {
                                       type: 'display',
-                                      myPoint: item.schoolLongitudeLatitude,
-                                      orginPoint: item.signOutLongitudeLatitude
+                                      myPoint: item.signOutLongitudeLatitude,
+                                      orginPoint: item.schoolLongitudeLatitude,
+                                      limitDistance: item.scopeOfAttendance
                                     }
                                   })
                                 }}

src/school/approval-manage/subsidy/exercise-detail.tsx

@@ -9,6 +9,7 @@ import OFullRefresh from '@/components/o-full-refresh'
 import Details from './details'
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
+import { courseEmnu } from '@/constant'
 
 export const courseSalaryRecordDetailItem = ref<ICourseSalaryRecordDetailItem>()
 
@@ -118,7 +119,7 @@ export default defineComponent({
                     title: () => (
                       <div class={styles.itemTitle}>
                         <div class={styles.titleLine}></div>
-                        <span>长笛单技训练</span>
+                        <span>{courseEmnu[item.courseType]}</span>
                       </div>
                     )
                   }}

src/school/approval-manage/subsidy/subsidyTypes.ts

@@ -205,6 +205,7 @@ interface ICourseScheduleTeacherAttendance {
   orchestraName: string
   /**课程编号 */
   courseScheduleId: string
+  scopeOfAttendance: number
   /**训练时长 */
   singleCourseTime: string
   /**签到状态（正常、异常、迟到、早退、旷课、未签到） */

src/school/attendance/components/attend-student.tsx

@@ -173,47 +173,34 @@ export default defineComponent({
       getList()
     }
     return () => (
-      <div
-
-      // style={{ minHeight: `calc(100vh - ${toTop.value}px)` }}
-      >
-        {/* <Sticky offsetTop={toTop.value} style={{ width: '100%' }}> */}
-        <div class={styles.chioseWrap}>
-          <div style={{ background: '#F8F8F8' }}>
-            <div
-              class={[styles.searchBand, styles.orchestraBand]}
-              onClick={() => {
-                state.showPopoverTime = true
-              }}
-            >
-              <p> {forms.timeName} </p>
-              <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
-            </div>
+      <div>
+        <div class={'searchGroup'}>
+          <div
+            class={['searchItem', state.showPopoverTime && 'searchItem-active']}
+            onClick={() => {
+              state.showPopoverTime = true
+            }}
+          >
+            {forms.timeName}
+            <i class={'arrow'}></i>
           </div>
-
-          <div style={{ background: '#F8F8F8' }}>
-            <div
-              class={[styles.searchBand, styles.orchestraBand]}
-              onClick={() => {
-                state.showPopoverOrchestra = true
-              }}
-            >
-              <p> {forms.orchestraName}</p>
-
-              <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
-            </div>
+          <div
+            class={['searchItem', state.showPopoverOrchestra && 'searchItem-active']}
+            onClick={() => {
+              state.showPopoverOrchestra = true
+            }}
+          >
+            <span>{forms.orchestraName}</span>
+            <i class={'arrow'}></i>
           </div>
-          <div style={{ background: '#F8F8F8' }}>
-            <div
-              class={[styles.searchBand, styles.orchestraBand]}
-              onClick={() => {
-                state.showPopoverSubject = true
-              }}
-            >
-              <p> {forms.subjectName}</p>
-
-              <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
-            </div>
+          <div
+            class={['searchItem', state.showPopoverSubject && 'searchItem-active']}
+            onClick={() => {
+              state.showPopoverSubject = true
+            }}
+          >
+            {forms.subjectName}
+            <i class={'arrow'}></i>
           </div>
         </div>
         {/* </Sticky> */}
@@ -221,14 +208,14 @@ export default defineComponent({
         <div
           style={{
             overflowY: 'auto',
-            height: 'calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.01333rem)'
+            height: 'calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.17333rem)'
           }}
         >
           {showContact.value ? (
             <OFullRefresh
               v-model:modelValue={refreshing.value}
               onRefresh={onRefresh}
-              style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.01333rem);"
+              style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 1.17333rem);"
             >
               <List
                 loading-text=" "
@@ -251,6 +238,7 @@ export default defineComponent({
           v-model:show={state.showPopoverTime}
           position="bottom"
           round
+          teleport={'body'}
           class={'popupBottomSearch'}
         >
           <DatePicker

src/school/attendance/components/attend-teacher.tsx

@@ -164,16 +164,13 @@ export default defineComponent({
       getList()
     }
     return () => (
-      <div
-      // class={!showContact.value && 'emptyRootContainer'}
-      // style={{ minHeight: `calc(100vh - ${toTop.value}px)` }}
-      >
-        {/* <Sticky offsetTop={toTop.value} style={{ width: '100%' }}> */}
+      <div>
         <>
           <OSearch
             placeholder="请输入伴学指导姓名"
-            inputBackground="white"
-            background="#f6f6f6"
+            // inputBackground="white"
+            // background="#f6f6f6"
+            class={styles.searchInput}
             onSearch={(val: any) => {
               console.log(val, 'onSearch')
               forms.keyword = val
@@ -181,59 +178,49 @@ export default defineComponent({
               getList()
             }}
           ></OSearch>
-          <div class={styles.chioseWrap}>
-            <div style={{ background: '#F8F8F8' }}>
-              <div
-                class={[styles.searchBand, styles.orchestraBand]}
-                onClick={() => {
-                  state.showPopoverTime = true
-                }}
-              >
-                <p> {forms.timeName}</p>
 
-                <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
-              </div>
+          <div class={'searchGroup'}>
+            <div
+              class={['searchItem', state.showPopoverTime && 'searchItem-active']}
+              onClick={() => {
+                state.showPopoverTime = true
+              }}
+            >
+              {forms.timeName}
+              <i class={'arrow'}></i>
             </div>
-
-            <div style={{ background: '#F8F8F8' }}>
-              <div
-                class={[styles.searchBand, styles.orchestraBand]}
-                onClick={() => {
-                  state.showPopoverOrchestra = true
-                }}
-              >
-                <p>{forms.orchestraName}</p>
-
-                <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
-              </div>
+            <div
+              class={['searchItem', state.showPopoverOrchestra && 'searchItem-active']}
+              onClick={() => {
+                state.showPopoverOrchestra = true
+              }}
+            >
+              <span>{forms.orchestraName}</span>
+              <i class={'arrow'}></i>
             </div>
-            <div style={{ background: '#F8F8F8' }}>
-              <div
-                class={[styles.searchBand, styles.orchestraBand]}
-                onClick={() => {
-                  state.showPopoverSubject = true
-                }}
-              >
-                <p> {forms.courseTypeName}</p>
-
-                <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
-              </div>
+            <div
+              class={['searchItem', state.showPopoverSubject && 'searchItem-active']}
+              onClick={() => {
+                state.showPopoverSubject = true
+              }}
+            >
+              {forms.courseTypeName}
+              <i class={'arrow'}></i>
             </div>
           </div>
         </>
-        {/* </Sticky> */}
 
         <div
           style={{
             overflowY: 'auto',
-            height: 'calc(100vh - var(--van-tabs-line-height) - var(--header-height)  - 2.45333rem)'
+            height: 'calc(100vh - var(--van-tabs-line-height) - var(--header-height)  - 2.61334rem)'
           }}
         >
           {showContact.value ? (
             <OFullRefresh
               v-model:modelValue={refreshing.value}
               onRefresh={onRefresh}
-              style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 2.45333rem)"
+              style="min-height: calc(100vh - var(--van-tabs-line-height) - var(--header-height) - 2.61334rem)"
             >
               <List
                 loading-text=" "
@@ -241,6 +228,7 @@ export default defineComponent({
                 finished={finished.value}
                 finished-text=" "
                 onLoad={getList}
+                style={{ paddingTop: '12px' }}
               >
                 {list.value.map((item: any) => (
                   <TeacherAttItem item={item}></TeacherAttItem>
@@ -251,6 +239,7 @@ export default defineComponent({
             <OEmpty tips="暂无考勤" />
           )}
         </div>
+
         <Popup
           v-model:show={state.showPopoverTime}
           position="bottom"
@@ -270,22 +259,6 @@ export default defineComponent({
             columnsType={columnsType.value}
           />
         </Popup>
-
-        {/* <ActionSheet
-          v-model:show={state.showPopoverOrchestra}
-          title="选择乐团"
-          actions={state.actions}
-          onSelect={checkOrchestra}
-        ></ActionSheet>
-
-        <ActionSheet
-          style={{ height: '40%' }}
-          close-on-click-action
-          v-model:show={state.showPopoverSubject}
-          title="选择课程"
-          actions={state.courseList}
-          onSelect={checkSubject}
-        ></ActionSheet> */}
         <Popup
           v-model:show={state.showPopoverOrchestra}
           position="bottom"

src/school/attendance/components/attent-student.module.less

@@ -24,3 +24,10 @@
     padding: 0 13px;
   }
 }
+.searchInput {
+  :global {
+    .van-search {
+      padding-bottom: 0;
+    }
+  }
+}

src/school/attendance/student-att-day.tsx

@@ -111,8 +111,8 @@ export default defineComponent({
         </OHeader>
         <OSearch
           placeholder="请输入学生姓名"
-          inputBackground="white"
-          background="#f6f6f6"
+          // inputBackground="white"
+          // background="#f6f6f6"
           onSearch={(val: any) => {
             forms.nickName = val
             refreshing.value = true

src/school/companion-teacher/index.tsx

@@ -179,24 +179,28 @@ export default defineComponent({
           </OHeader>
           <OSearch
             placeholder="请输入伴学指导姓名"
-            inputBackground="white"
-            background="#f6f8f9"
+            // inputBackground="white"
+            // background="#f6f8f9"
+            class="searchGroupInput"
             onSearch={(val: any) => {
               form.params.keyword = val
               onSearch()
             }}
           />
-          <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
-            <div class={styles.searchBand} onClick={() => (form.showPopover = true)}>
-              {form.subjectText} <Icon name={form.showPopover ? 'arrow-up' : 'arrow-down'} />
+          <div class={'searchGroup'}>
+            <div
+              class={['searchItem', form.showPopover && 'searchItem-active']}
+              onClick={() => (form.showPopover = true)}
+            >
+              <span>{form.subjectText}</span>
+              <i class="arrow"></i>
             </div>
-
             <div
-              class={styles.searchBand}
-              style="margin-left: 16px"
+              class={['searchItem', form.oPopover && 'searchItem-active']}
               onClick={() => (form.oPopover = true)}
             >
-              {form.statusText} <Icon name={form.oPopover ? 'arrow-up' : 'arrow-down'} />
+              <span>{form.statusText}</span>
+              <i class="arrow"></i>
             </div>
           </div>
         </OSticky>
@@ -215,6 +219,7 @@ export default defineComponent({
               finishedText=" "
               class={[styles.liveList]}
               onLoad={getList}
+              style={{ paddingTop: '12px' }}
               immediateCheck={false}
             >
               {form.list.map((item: any) => (

src/school/manage-teacher/index.tsx

@@ -134,8 +134,8 @@ export default defineComponent({
           </OHeader>
           <OSearch
             placeholder="请输入管理老师姓名"
-            inputBackground="white"
-            background="#f6f8f9"
+            // inputBackground="white"
+            // background="#f6f8f9"
             onSearch={(val: any) => {
               console.log(val)
               form.params.keyword = val
@@ -144,11 +144,10 @@ export default defineComponent({
             v-slots={{
               left: () => (
                 <div
-                  class={styles.searchBand}
-                  style={{ marginRight: '13px' }}
+                  class={['searchItem-left', form.oPopover ? 'searchItem--active' : '']}
                   onClick={() => (form.oPopover = true)}
                 >
-                  {form.statusText} <Icon name={form.oPopover ? 'arrow-up' : 'arrow-down'} />
+                  <span>{form.statusText}</span>
                 </div>
               )
             }}
@@ -168,6 +167,7 @@ export default defineComponent({
               finishedText=" "
               class={[styles.liveList]}
               onLoad={getList}
+              style={{ paddingTop: '12px' }}
               immediateCheck={false}
             >
               {form.list.map((item: any) => (

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

@@ -1,13 +1,5 @@
-.searchBand {
-  // margin: 12px 13px;
-  display: inline-block;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333333;
-}
-
 .gridContainer {
-  margin: 0 13px 12px;
+  margin: 12px 13px 12px;
   background: #ffffff;
   border-radius: 10px;
   overflow: hidden;

src/school/orchestra/compontent/information.tsx

@@ -1,5 +1,6 @@
 import OSticky from '@/components/o-sticky'
 import {
+  ActionSheet,
   Button,
   closeToast,
   DatePicker,
@@ -52,8 +53,8 @@ export default defineComponent({
       actionText: '上学期',
       actionType: 'up',
       actionTerm: [
-        { text: '上学期', color: 'var(--van-primary-color)', value: 'up' },
-        { text: '下学期', value: 'down' }
+        { name: '上学期', color: 'var(--van-primary-color)', value: 'up' },
+        { name: '下学期', value: 'down' }
       ],
       oPopover: false,
       check: [],
@@ -81,11 +82,12 @@ export default defineComponent({
 
     // 选择学期
     const onSelect = (val: any) => {
+      console.log(val, '1')
       state.actionTerm.forEach((item: any) => {
         item.color = null
       })
       val.color = 'var(--van-primary-color)'
-      state.actionText = val.text
+      state.actionText = val.name
       state.actionType = val.value
 
       if (val.value === 'up') {
@@ -105,6 +107,7 @@ export default defineComponent({
           .subtract(1, 'day')
           .format('YYYY-MM-DD HH:mm:ss')
       }
+      state.oPopover = false
       onSearch()
     }
 
@@ -258,120 +261,120 @@ export default defineComponent({
 
     return () => (
       <>
-        <div style={{ padding: '12px 13px 16px', background: '#F8F8F8' }}>
-          <div class={styles.searchBand} onClick={() => (state.timeShow = true)}>
-            {state.currentData[0]}年 <Icon name={state.timeShow ? 'arrow-up' : 'arrow-down'} />
+        <div class={'searchGroup'}>
+          <div
+            class={['searchItem', state.timeShow ? 'searchItem-active' : '']}
+            onClick={() => (state.timeShow = true)}
+          >
+            {state.currentData[0]}年 <i class={'arrow'}></i>
           </div>
-          <Popover
-            v-model:show={state.oPopover}
-            actions={state.actionTerm}
-            showArrow={false}
-            placement="bottom"
-            offset={[0, 12]}
-            style={{ zIndex: '9999' }}
-            onSelect={onSelect}
+          <div
+            class={['searchItem', state.oPopover ? 'searchItem-active' : '']}
+            onClick={() => (state.oPopover = true)}
           >
-            {{
-              reference: () => (
-                <div class={styles.searchBand} style="margin-left: 16px">
-                  {state.actionText} <Icon name={state.oPopover ? 'arrow-up' : 'arrow-down'} />
-                </div>
-              )
-            }}
-          </Popover>
+            {state.actionText} <i class={'arrow'}></i>
+          </div>
         </div>
 
-        <Grid border={false} class={styles.gridContainer}>
-          <GridItem>
-            <p class={[styles.title, styles.red]}>
-              <span id="currentStudentNum">{state.statistics.studentNum || 0}</span>
-              <i> 名</i>
-            </p>
-            <p class={styles.name}>在读学生</p>
-          </GridItem>
-          <GridItem>
-            <p class={[styles.title, styles.red]}>
-              <span id="time1">{state.statistics.attendanceRate || 0}</span>%
-            </p>
-            <p class={styles.name}>到课率</p>
-          </GridItem>
-          <GridItem>
-            <p class={[styles.title, styles.red]}>
-              <span id="time2">{state.statistics.homeworkRate || 0}</span>%
-            </p>
-            <p class={styles.name}>作业提交率</p>
-          </GridItem>
-          <GridItem>
-            <p class={[styles.title, styles.red]}>
-              <span id="time3">{state.statistics.homeworkQualifiedRate || 0}</span>%
-            </p>
-            <p class={styles.name}>练习合格率</p>
-          </GridItem>
-        </Grid>
+        <div style="height: calc(100vh - var(--header-height) - 1.17333rem); overflow: hidden; overflow-y: auto;">
+          <Grid border={false} class={styles.gridContainer}>
+            <GridItem>
+              <p class={[styles.title, styles.red]}>
+                <span id="currentStudentNum">{state.statistics.studentNum || 0}</span>
+                <i> 名</i>
+              </p>
+              <p class={styles.name}>在读学生</p>
+            </GridItem>
+            <GridItem>
+              <p class={[styles.title, styles.red]}>
+                <span id="time1">{state.statistics.attendanceRate || 0}</span>%
+              </p>
+              <p class={styles.name}>到课率</p>
+            </GridItem>
+            <GridItem>
+              <p class={[styles.title, styles.red]}>
+                <span id="time2">{state.statistics.homeworkRate || 0}</span>%
+              </p>
+              <p class={styles.name}>作业提交率</p>
+            </GridItem>
+            <GridItem>
+              <p class={[styles.title, styles.red]}>
+                <span id="time3">{state.statistics.homeworkQualifiedRate || 0}</span>%
+              </p>
+              <p class={styles.name}>练习合格率</p>
+            </GridItem>
+          </Grid>
 
-        {state.listState.dataShow ? (
-          <List
-            // v-model:loading={state.listState.loading}
-            finished={state.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
-          >
-            {state.list.map((item: any) => (
-              <div class={[styles.gridContainer, styles.gridClass]}>
-                <div class={styles.className}>
-                  <i class={styles.line}></i>
-                  {item.name}
+          {state.listState.dataShow ? (
+            <List
+              // v-model:loading={state.listState.loading}
+              finished={state.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {state.list.map((item: any) => (
+                <div class={[styles.gridContainer, styles.gridClass]}>
+                  <div class={styles.className}>
+                    <i class={styles.line}></i>
+                    {item.name}
+                  </div>
+                  <Grid border={false} columnNum={3}>
+                    <GridItem>
+                      <p class={styles.title}>{item.preStudentNum || 0}</p>
+                      <p class={styles.name}>在读学生</p>
+                    </GridItem>
+                    <GridItem>
+                      <p class={[styles.title, styles.teacher, 'van-ellipsis']}>
+                        {item.teacherName || '-'}
+                      </p>
+                      <p class={styles.name}>伴学指导</p>
+                    </GridItem>
+                    <GridItem>
+                      <p class={styles.title}>
+                        {item.completeCourseScheduleNum || 0}/{item.courseScheduleNum || 0}
+                      </p>
+                      <p class={styles.name}>课时</p>
+                    </GridItem>
+                  </Grid>
                 </div>
-                <Grid border={false} columnNum={3}>
-                  <GridItem>
-                    <p class={styles.title}>{item.preStudentNum || 0}</p>
-                    <p class={styles.name}>在读学生</p>
-                  </GridItem>
-                  <GridItem>
-                    <p class={[styles.title, styles.teacher, 'van-ellipsis']}>
-                      {item.teacherName || '-'}
-                    </p>
-                    <p class={styles.name}>伴学指导</p>
-                  </GridItem>
-                  <GridItem>
-                    <p class={styles.title}>
-                      {item.completeCourseScheduleNum || 0}/{item.courseScheduleNum || 0}
-                    </p>
-                    <p class={styles.name}>课时</p>
-                  </GridItem>
-                </Grid>
+              ))}
+            </List>
+          ) : (
+            <OEmpty btnStatus={false} tips="暂无班级" />
+          )}
+          {/*  */}
+          {state.orchestraInfo.canSignUp && (
+            <OSticky position="bottom">
+              <div class={'btnGroup'}>
+                <Button
+                  round
+                  block
+                  type="primary"
+                  onClick={() => {
+                    router.push({
+                      path: 'save-share-image',
+                      query: {
+                        type: 'orchestra',
+                        id: route.query.id
+                      }
+                    })
+                  }}
+                >
+                  报名二维码
+                </Button>
               </div>
-            ))}
-          </List>
-        ) : (
-          <OEmpty btnStatus={false} tips="暂无班级" />
-        )}
+            </OSticky>
+          )}
+        </div>
 
-        {/*  */}
-        {state.orchestraInfo.canSignUp && (
-          <OSticky position="bottom">
-            <div class={'btnGroup'}>
-              <Button
-                round
-                block
-                type="primary"
-                onClick={() => {
-                  router.push({
-                    path: 'save-share-image',
-                    query: {
-                      type: 'orchestra',
-                      id: route.query.id
-                    }
-                  })
-                }}
-              >
-                报名二维码
-              </Button>
-            </div>
-          </OSticky>
-        )}
+        <ActionSheet
+          v-model:show={state.oPopover}
+          actions={state.actionTerm}
+          cancelText="取消"
+          onSelect={onSelect}
+        />
 
         <Popup v-model:show={state.timeShow} position="bottom" round class={'popupBottomSearch'}>
           <DatePicker

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

@@ -1,12 +1,5 @@
-.searchBand {
-  display: inline-block;
-  font-size: 14px;
-  font-weight: 600;
-  color: #333333;
-}
-
 .gridContainer {
-  margin: 0 13px 12px;
+  margin: 12px 13px 12px;
   background: #ffffff;
   border-radius: 10px;
   overflow: hidden;

src/school/orchestra/compontent/plan.tsx

@@ -4,7 +4,7 @@ import dayjs from 'dayjs'
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 dayjs.extend(isSameOrBefore, isSameOrAfter)
-import { Cell, DatePicker, Icon, Image, List, Popover, Popup } from 'vant'
+import { ActionSheet, Cell, DatePicker, Icon, Image, List, Popover, Popup } from 'vant'
 import { computed, defineComponent, onMounted, reactive } from 'vue'
 import { useRoute } from 'vue-router'
 import styles from './plan.module.less'
@@ -33,8 +33,8 @@ export default defineComponent({
       actionText: '上学期',
       actionType: 'up',
       actionTerm: [
-        { text: '上学期', color: 'var(--van-primary-color)', value: 'up' },
-        { text: '下学期', value: 'down' }
+        { name: '上学期', color: 'var(--van-primary-color)', value: 'up' },
+        { name: '下学期', value: 'down' }
       ],
       oPopover: false,
       check: [],
@@ -60,12 +60,11 @@ export default defineComponent({
     })
     // 选择学期
     const onSelect = (val: any) => {
-      console.log(val)
       state.actionTerm.forEach((item: any) => {
         item.color = null
       })
       val.color = 'var(--van-primary-color)'
-      state.actionText = val.text
+      state.actionText = val.name
       state.actionType = val.value
 
       if (val.value === 'up') {
@@ -85,6 +84,7 @@ export default defineComponent({
           .subtract(1, 'day')
           .format('YYYY-MM-DD HH:mm:ss')
       }
+      state.oPopover = false
       onSearch()
     }
 
@@ -196,108 +196,77 @@ export default defineComponent({
       await getList()
     })
     return () => (
-      <div
-        class={!state.listState.dataShow && 'emptyRootContainer'}
-        style={{ minHeight: `calc(100vh - ${props.height}px)` }}
-      >
-        <div
-          style={{
-            padding: '12px 13px 16px',
-            background: '#F8F8F8',
-            width: '100%',
-            boxSizing: 'border-box'
-          }}
-        >
-          <div class={styles.searchBand} onClick={() => (state.timeShow = true)}>
-            {state.currentData[0]}年 <Icon name={state.showPopover ? 'arrow-up' : 'arrow-down'} />
+      <div>
+        <div class={['searchGroup']}>
+          <div
+            class={['searchItem', state.timeShow ? 'searchItem-active' : '']}
+            onClick={() => (state.timeShow = true)}
+          >
+            {state.currentData[0]}年 <i class={'arrow'}></i>
           </div>
-          <Popover
-            v-model:show={state.oPopover}
-            actions={state.actionTerm}
-            showArrow={false}
-            placement="bottom"
-            offset={[0, 12]}
-            style={{ zIndex: '9999' }}
-            onSelect={onSelect}
+          <div
+            class={['searchItem', state.oPopover ? 'searchItem-active' : '']}
+            onClick={() => (state.oPopover = true)}
           >
-            {{
-              reference: () => (
-                <div class={styles.searchBand} style="margin-left: 16px">
-                  {state.actionText} <Icon name={state.oPopover ? 'arrow-up' : 'arrow-down'} />
-                </div>
-              )
-            }}
-          </Popover>
+            {state.actionText} <i class={'arrow'}></i>
+          </div>
         </div>
 
-        {state.listState.dataShow ? (
-          <List
-            // v-model:loading={state.listState.loading}
-            finished={state.listState.finished}
-            finishedText=" "
-            class={[styles.liveList]}
-            onLoad={getList}
-            immediateCheck={false}
-          >
-            {state.list.map((item: any) => (
-              // <div class={[styles.gridContainer, styles.gridClass]}>
-              //   <div class={styles.className}>
-              //     <i class={styles.line}></i>
-              //     {item.name}
-              //   </div>
-              //   <Grid border={false} columnNum={3}>
-              //     <GridItem>
-              //       <p class={styles.title}>{item.preStudentNum || 0}</p>
-              //       <p class={styles.name}>在读学生</p>
-              //     </GridItem>
-              //     <GridItem>
-              //       <p class={[styles.title, styles.teacher]}>{item.teacherName || '/'}</p>
-              //       <p class={styles.name}>伴学指导</p>
-              //     </GridItem>
-              //     <GridItem>
-              //       <p class={styles.title}>
-              //         {item.completeCourseScheduleNum || 0}/{item.courseScheduleNum || 0}
-              //       </p>
-              //       <p class={styles.name}>课时</p>
-              //     </GridItem>
-              //   </Grid>
-              // </div>
-              <div class={[styles.gridContainer, styles.gridClass]}>
-                <div class={styles.className}>
-                  <i class={styles.line}></i>
-                  {item.name}
+        <div style="height: calc(100vh - var(--header-height) - 1.17333rem); overflow: hidden; overflow-y: auto;">
+          {state.listState.dataShow ? (
+            <List
+              // v-model:loading={state.listState.loading}
+              finished={state.listState.finished}
+              finishedText=" "
+              class={[styles.liveList]}
+              onLoad={getList}
+              immediateCheck={false}
+            >
+              {state.list.map((item: any) => (
+                <div class={[styles.gridContainer, styles.gridClass]}>
+                  <div class={styles.className}>
+                    <i class={styles.line}></i>
+                    {item.name}
+                  </div>
+                  <Cell center>
+                    {{
+                      icon: () => (
+                        <Image
+                          class={styles.img}
+                          src={item.teacherAvatar || iconTeacher}
+                          fit="cover"
+                        />
+                      ),
+                      title: () => (
+                        <>
+                          <p class={styles.class}>
+                            {item.completeCourseScheduleNum || 0}/{item.courseScheduleNum || 0}
+                          </p>
+                          <p class={styles.teacherDesc}>课时</p>
+                        </>
+                      ),
+                      value: () => (
+                        <>
+                          <p class={styles.courseware}>{item.newestLessonPlanDetailName || '-'}</p>
+                          <p class={styles.teacherDesc}>最新课件</p>
+                        </>
+                      )
+                    }}
+                  </Cell>
                 </div>
-                <Cell center>
-                  {{
-                    icon: () => (
-                      <Image
-                        class={styles.img}
-                        src={item.teacherAvatar || iconTeacher}
-                        fit="cover"
-                      />
-                    ),
-                    title: () => (
-                      <>
-                        <p class={styles.class}>
-                          {item.completeCourseScheduleNum || 0}/{item.courseScheduleNum || 0}
-                        </p>
-                        <p class={styles.teacherDesc}>课时</p>
-                      </>
-                    ),
-                    value: () => (
-                      <>
-                        <p class={styles.courseware}>{item.newestLessonPlanDetailName || '-'}</p>
-                        <p class={styles.teacherDesc}>最新课件</p>
-                      </>
-                    )
-                  }}
-                </Cell>
-              </div>
-            ))}
-          </List>
-        ) : (
-          <OEmpty btnStatus={false} tips="暂无班级" />
-        )}
+              ))}
+            </List>
+          ) : (
+            <OEmpty btnStatus={false} tips="暂无班级" />
+          )}
+        </div>
+
+        <ActionSheet
+          v-model:show={state.oPopover}
+          actions={state.actionTerm}
+          cancelText="取消"
+          onSelect={onSelect}
+        />
 
         <Popup v-model:show={state.timeShow} position="bottom" round class={'popupBottomSearch'}>
           <DatePicker

src/school/orchestra/index.tsx

@@ -1,7 +1,7 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
 import request from '@/helpers/request'
-import { Cell, Icon, List, Popover, Tag } from 'vant'
+import { ActionSheet, Cell, Icon, List, Popover, Tag } from 'vant'
 import { defineComponent, onMounted, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import styles from './index.module.less'
@@ -17,9 +17,9 @@ export default defineComponent({
     const form = reactive({
       showPopover: false,
       actions: [
-        { text: '全部乐团', color: 'var(--van-primary-color)', value: 'ALL' },
-        { text: '交付团', value: 'DELIVERY' },
-        { text: '晋升团', value: 'PROMOTION' }
+        { name: '全部乐团', color: 'var(--van-primary-color)', value: 'ALL' },
+        { name: '交付团', value: 'DELIVERY' },
+        { name: '晋升团', value: 'PROMOTION' }
       ],
       isClick: false,
       list: [] as any,
@@ -53,6 +53,7 @@ export default defineComponent({
       })
       val.color = 'var(--van-primary-color)'
       form.params.type = val.value === 'ALL' ? null : val.value
+      form.showPopover = false
       form.params.page = 1
       form.list = []
       form.listState.dataShow = true // 判断是否有数据
@@ -135,24 +136,13 @@ export default defineComponent({
               )
             }}
           </OHeader>
-          <div style={{ padding: '12px 13px', background: '#F8F8F8' }}>
-            <Popover
-              v-model:show={form.showPopover}
-              actions={form.actions}
-              showArrow={false}
-              placement="bottom-start"
-              onSelect={onSelect}
-              offset={[0, 12]}
+          <div class="searchGroup-single">
+            <span
+              onClick={() => (form.showPopover = true)}
+              class={['searchItem', form.showPopover ? 'searchItem--active' : '']}
             >
-              {{
-                reference: () => (
-                  <div class={styles.searchBand}>
-                    {formatType(form.params.type)}
-                    <Icon name={form.showPopover ? 'arrow-up' : 'arrow-down'} />
-                  </div>
-                )
-              }}
-            </Popover>
+              {formatType(form.params.type)}
+            </span>
           </div>
         </OSticky>
 
@@ -196,6 +186,13 @@ export default defineComponent({
         ) : (
           <OEmpty btnStatus={false} tips="暂无乐团" />
         )}
+
+        <ActionSheet
+          v-model:show={form.showPopover}
+          actions={form.actions}
+          cancelText="取消"
+          onSelect={onSelect}
+        />
       </div>
     )
   }

src/school/orchestra/modal/student-list.tsx

@@ -183,32 +183,29 @@ export default defineComponent({
         <OSticky position="top">
           <OHeader title="选择学生" desotry={false} />
           <OSearch
-            inputBackground="white"
-            background="#F8F8F8"
+            // inputBackground="white"
+            // background="#F8F8F8"
+            class="searchGroupInput"
             placeholder="学生名称/手机号"
             onSearch={(val: any) => {
               state.params.keyword = val
               onSearch()
             }}
           />
-          <div
-            style={{
-              padding: '8px 13px 16px',
-              background: '#F8F8F8',
-              display: 'flex',
-              alignItems: 'center'
-            }}
-          >
-            <div class={styles.searchBand} onClick={() => (state.showPopover = true)}>
-              {state.class.name} <Icon name={state.showPopover ? 'arrow-up' : 'arrow-down'} />
+          <div class={'searchGroup'}>
+            <div
+              class={['searchItem searchItem-large', state.showPopover ? 'searchItem-active' : '']}
+              onClick={() => (state.showPopover = true)}
+            >
+              <span>{state.class.name}</span>
+              <i class="arrow"></i>
             </div>
             <div
-              class={styles.searchBand}
-              style="margin-left: 16px"
+              class={['searchItem searchItem-large', state.oPopover ? 'searchItem-active' : '']}
               onClick={() => (state.oPopover = true)}
             >
-              <div class={['van-ellipsis', styles.bandName]}>{state.orchestra.name}</div>
-              <Icon name={state.oPopover ? 'arrow-up' : 'arrow-down'} />
+              <span>{state.orchestra.name}</span>
+              <i class="arrow"></i>
             </div>
           </div>
         </OSticky>
@@ -220,6 +217,7 @@ export default defineComponent({
             finishedText=" "
             class={[styles.liveList]}
             onLoad={getList}
+            style={{ paddingTop: '12px' }}
             immediateCheck={false}
           >
             <CheckboxGroup v-model={state.check}>

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

@@ -7,7 +7,7 @@
       font-weight: 400;
     }
     .van-tabs__wrap {
-      padding-bottom: 3px;
+      // padding-bottom: 3px;
     }
   }
 }

src/school/orchestra/orchestra-detail.tsx

@@ -21,11 +21,6 @@ export default defineComponent({
       end: '03-01'
     })
 
-    // 获取头部高度
-    const onGetHeight = (height: any) => {
-      tabHeight.value = height
-    }
-
     const getDefaultParams = async () => {
       // last_term_time 上学期
       // next_term_time 下学期
@@ -48,7 +43,13 @@ export default defineComponent({
 
     return () => (
       <div class={styles.orchestraDetail}>
-        <OSticky position="top" onGetHeight={onGetHeight}>
+        <OSticky
+          position="top"
+          onGetHeight={(height: any) => {
+            tabHeight.value = height
+            document.documentElement.style.setProperty('--header-height', height + 'px')
+          }}
+        >
           <OHeader />
           <Tabs sticky lineWidth={20} lineHeight={4} v-model:active={tabValue.value}>
             <Tab title="乐团信息" name="information"></Tab>

src/school/practice-rewards/detail.tsx

@@ -156,15 +156,15 @@ export default defineComponent({
           </Grid>
         </div>
 
-        <div class={styles.searchGroup}>
-          <span
-            class={[styles.searchItem, state.subjectStatus && styles['searchItem--active']]}
+        <div class={'searchGroup-single'} style="padding-top: 0;">
+          <div
+            class={['searchItem', state.subjectStatus && styles['searchItem--active']]}
             onClick={() => {
               state.subjectStatus = !state.subjectStatus
             }}
           >
-            <div>{state.subjectName}</div>
-          </span>
+            {state.subjectName}
+          </div>
         </div>
         {state.listState.dataShow ? (
           <OFullRefresh

src/school/practice-rewards/index.module.less

@@ -195,45 +195,6 @@
   }
 }
 
-.searchGroup {
-  padding: 0 13px 14px;
-}
-.searchItem {
-  position: relative;
-  box-sizing: border-box;
-  max-width: 100%;
-  padding: 6px 24px 6px 13px;
-  background-color: #fff;
-  border-radius: 16px;
-  display: inline-block;
-  font-size: 14px;
-  color: #333333;
-  line-height: 20px;
-  transition: all 0.2s ease-in-out;
-  &::after {
-    position: absolute;
-    top: 50%;
-    right: 13px;
-    margin-top: -5px;
-    border: 3px solid;
-    border-color: transparent transparent #aaaaaa #aaaaaa;
-    transform: rotate(-45deg);
-    transition: all 0.2s ease-in-out;
-    opacity: 0.8;
-    content: '';
-  }
-
-  &.searchItem--active {
-    color: var(--van-primary-color);
-
-    &::after {
-      margin-top: -1px;
-      transform: rotate(135deg);
-      border-color: transparent transparent currentColor currentColor;
-    }
-  }
-}
-
 .cellGroup {
   border-radius: 10px;
   :global {

src/school/practice-rewards/index.tsx

@@ -38,7 +38,7 @@ export default defineComponent({
 
     const getStatistics = async () => {
       try {
-        const { data } = await request.post('/api-school/schoolWeekSalaryRecord/statistics')
+        const { data } = await request.post('/api-school/schoolWeekSalaryRecord/trainingStatistics')
         console.log(data)
         state.statistics = {
           totalTrainingSalary: data.totalTrainingSalary || 0,

src/school/ranking-list/components/day-bang.tsx

@@ -182,40 +182,39 @@ export default defineComponent({
       >
         {/* <OSticky position="top" background="#FFF"> */}
         <Sticky offsetTop={toTop.value} style={{ width: '100%' }}>
-          <div class={styles.chioseWrap}>
-            <div style={{ padding: '0 13px', background: '#FFF' }}>
-              <div
-                class={styles.searchBand}
-                onClick={() => {
-                  state.showPopoverTime = true
-                }}
-              >
-                {forms.timeName}
-                <Icon name={state.showPopoverTime ? 'arrow-up' : 'arrow-down'} />
-              </div>
+          <div class={'searchGroup'}>
+            <div
+              class={['searchItem searchItem-normal', state.showPopoverTime && 'searchItem-active']}
+              onClick={() => {
+                state.showPopoverTime = true
+              }}
+            >
+              <span>{forms.timeName}</span>
+              <i class="arrow"></i>
             </div>
-
-            <div style={{ padding: '0 13px', background: '#FFF' }}>
-              <div
-                class={[styles.searchBand, styles.orchestraBand]}
-                onClick={() => {
-                  state.showPopoverOrchestra = true
-                }}
-              >
-                <div class={['van-ellipsis', styles.bandName]}>{forms.orchestraName}</div>
-                <Icon name={state.showPopoverOrchestra ? 'arrow-up' : 'arrow-down'} />
-              </div>
+            <div
+              class={[
+                'searchItem searchItem-normal',
+                state.showPopoverOrchestra && 'searchItem-active'
+              ]}
+              onClick={() => {
+                state.showPopoverOrchestra = true
+              }}
+            >
+              <span>{forms.orchestraName}</span>
+              <i class="arrow"></i>
             </div>
-            <div style={{ padding: '0 13px', background: '#FFF' }}>
-              <div
-                class={[styles.searchBand, styles.orchestraBand]}
-                onClick={() => {
-                  state.showPopoverSubject = true
-                }}
-              >
-                {forms.subjectName}
-                <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
-              </div>
+            <div
+              class={[
+                'searchItem searchItem-normal',
+                state.showPopoverSubject && 'searchItem-active'
+              ]}
+              onClick={() => {
+                state.showPopoverSubject = true
+              }}
+            >
+              <span>{forms.subjectName}</span>
+              <i class="arrow"></i>
             </div>
           </div>
         </Sticky>

src/school/ranking-list/components/timer-bang.tsx

@@ -181,7 +181,42 @@ export default defineComponent({
       >
         {/* <OSticky position="top" background="#FFF"> */}
         <Sticky offsetTop={toTop.value} style={{ width: '100%' }}>
-          <div class={styles.chioseWrap}>
+          <div class={'searchGroup'}>
+            <div
+              class={['searchItem searchItem-normal', state.showPopoverTime && 'searchItem-active']}
+              onClick={() => {
+                state.showPopoverTime = true
+              }}
+            >
+              <span>{forms.timeName}</span>
+              <i class="arrow"></i>
+            </div>
+            <div
+              class={[
+                'searchItem searchItem-normal',
+                state.showPopoverOrchestra && 'searchItem-active'
+              ]}
+              onClick={() => {
+                state.showPopoverOrchestra = true
+              }}
+            >
+              <span>{forms.orchestraName}</span>
+              <i class="arrow"></i>
+            </div>
+            <div
+              class={[
+                'searchItem searchItem-normal',
+                state.showPopoverSubject && 'searchItem-active'
+              ]}
+              onClick={() => {
+                state.showPopoverSubject = true
+              }}
+            >
+              <span>{forms.subjectName}</span>
+              <i class="arrow"></i>
+            </div>
+          </div>
+          {/* <div class={styles.chioseWrap}>
             <div style={{ padding: '0 13px', background: '#FFF' }}>
               <div
                 class={styles.searchBand}
@@ -221,7 +256,7 @@ export default defineComponent({
                 <Icon name={state.showPopoverSubject ? 'arrow-up' : 'arrow-down'} />
               </div>
             </div>
-          </div>
+          </div> */}
         </Sticky>
         {/* </OSticky> */}
 

src/school/train-planning/modal/practice-class/index.tsx

@@ -170,10 +170,12 @@ export default defineComponent({
         <OSticky position="top">
           <OHeader title="选择班级" desotry={false} />
           {!props.orchestraId && (
-            <div style={{ padding: '12px 13px', background: '#f6f6f6' }}>
-              <div class={styles.searchBand} onClick={() => (forms.showPopover = true)}>
-                <div class={['van-ellipsis', styles.bandName]}>{forms.orchestraName}</div>
-                <Icon name={forms.showPopover ? 'arrow-up' : 'arrow-down'} />
+            <div class="searchGroup-single">
+              <div
+                class={['searchItem', forms.showPopover && 'searchItem--active']}
+                onClick={() => (forms.showPopover = true)}
+              >
+                <span>{forms.orchestraName}</span>
               </div>
             </div>
           )}

src/styles/index.less

@@ -329,6 +329,7 @@ input {
 
 // 搜索公用样式
 .popupBottomSearch {
+  --van-picker-toolbar-height: 44px !important;
   .van-picker__toolbar {
     position: relative;
     &::after {
@@ -355,3 +356,147 @@ input {
     }
   }
 }
+
+.searchGroupInput {
+  .van-search {
+    padding-bottom: 0;
+  }
+}
+.searchGroup {
+  padding: 0 13px;
+  line-height: 44px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  .searchItem {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 600;
+    color: #333333;
+    // display: flex;
+    // align-items: center;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &.searchItem-active {
+      color: var(--van-primary);
+      .arrow {
+        transform: rotateX(180deg);
+        margin-top: -1px;
+        background: url('../common/svg/arrow-active.svg') no-repeat center center;
+        background-size: 100%;
+      }
+    }
+    span {
+      max-width: 70px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    &.searchItem-large {
+      span {
+        max-width: 120px;
+      }
+    }
+    &.searchItem-normal {
+      span {
+        max-width: 100px;
+      }
+    }
+  }
+
+  .arrow {
+    display: inline-block;
+    background-size: 100%;
+    background: url('../common/svg/arrow.svg') no-repeat center center;
+    width: 9px;
+    height: 5px;
+    margin-left: 4px;
+  }
+}
+
+.searchGroup-single {
+  padding: 12px 13px;
+  .searchItem {
+    position: relative;
+    box-sizing: border-box;
+    max-width: 100%;
+    padding: 0 24px 0 13px;
+    background-color: #fff;
+    border-radius: 16px;
+
+    font-size: 14px;
+    color: #333333;
+    line-height: 32px;
+    display: inline-flex;
+    align-items: center;
+    &::after {
+      position: absolute;
+      top: 50%;
+      right: 13px;
+      margin-top: -5px;
+      border: 3px solid;
+      border-color: transparent transparent #aaaaaa #aaaaaa;
+      transform: rotate(-45deg);
+      // transition: all 0.2s ease-in-out;
+      opacity: 0.8;
+      content: '';
+    }
+
+    &.searchItem--active {
+      color: var(--van-primary-color);
+
+      &::after {
+        margin-top: -1px;
+        transform: rotate(135deg);
+        border-color: transparent transparent currentColor currentColor;
+      }
+    }
+    span {
+      max-width: 150px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.searchItem-left {
+  position: relative;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333333;
+  margin-right: 21px;
+  &::after {
+    position: absolute;
+    top: 50%;
+    right: -13px;
+    margin-top: -5px;
+    border: 3px solid;
+    border-color: transparent transparent #aaaaaa #aaaaaa;
+    transform: rotate(-45deg);
+    // transition: all 0.2s ease-in-out;
+    opacity: 0.8;
+    content: '';
+  }
+
+  span {
+    max-width: 70px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.searchItem--active {
+    color: var(--van-primary-color);
+
+    &::after {
+      margin-top: -1px;
+      transform: rotate(135deg);
+      border-color: transparent transparent currentColor currentColor;
+    }
+  }
+}

src/views/bind-wechat/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, reactive } from 'vue'
 import { Button, closeToast, Image, Popup } from 'vant'
 import styles from './index.module.less'
 import iconLogo from './images/icon-logo.png'
+import iconLargeLogo from './images/icon-large-logo.png'
 import { useRoute } from 'vue-router'
 import qs from 'query-string'
 import { browser, getUrlCode } from '@/helpers/utils'
@@ -116,7 +117,7 @@ export default defineComponent({
     })
     return () => (
       <div class={styles.bindWeChat}>
-        <Image class={styles.largeLogo} />
+        <Image class={styles.largeLogo} src={iconLargeLogo} />
         <Image src={iconLogo} class={styles.smallLogo} />
 
         <p class={styles.tips}>同意管乐团获取您的微信信息</p>