| | |
| | | <template> |
| | | <QueryMenuView @close="handleReset" @confirm="emit('close')" cancelText="重置"> |
| | | <div class="home-query-menu-view"> |
| | | <QueryMenuItem title="结算方式"> |
| | | <QueryMenuItem title="性别"> |
| | | <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio> |
| | | </QueryMenuItem> |
| | | <QueryMenuItem title="员工福利"> |
| | | <QueryMenuItem title="身份"> |
| | | <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio> |
| | | </QueryMenuItem> |
| | | <QueryMenuItem title="性别要求"> |
| | | <QueryMenuItem> |
| | | <template #title> |
| | | <div class="rang-title-wrapper"> |
| | | <div class="rang-title">年龄</div> |
| | | <div class="rang-value">{{ query.age[0] }} - {{ query.age[1] }} 岁</div> |
| | | </div> |
| | | </template> |
| | | <nut-range |
| | | v-model="query.age" |
| | | range |
| | | :min="15" |
| | | :max="65" |
| | | class="home-query-menu-range" |
| | | ></nut-range> |
| | | </QueryMenuItem> |
| | | <QueryMenuItem title="资格证书"> |
| | | <ProRadio v-model="query.gender" :value-enum="GenderText" show-all-btn></ProRadio> |
| | | </QueryMenuItem> |
| | | </div> |
| | |
| | | |
| | | const query = defineModel<{ |
| | | gender: number | string; |
| | | age: number[]; |
| | | }>('query'); |
| | | |
| | | const DefaultQuery = { |
| | | ...query.value, |
| | | }; |
| | | |
| | | console.log('query: ', query.value); |
| | | function handleReset() { |
| | | for (const key in DefaultQuery) { |
| | | query.value[key] = DefaultQuery[key]; |
| | |
| | | max-height: 400px; |
| | | padding: 30px; |
| | | overflow: auto; |
| | | |
| | | .home-query-menu-range { |
| | | padding: 36px 0; |
| | | } |
| | | |
| | | .rang-title-wrapper { |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | .rang-title { |
| | | margin-right: 36px; |
| | | } |
| | | |
| | | .rang-value { |
| | | color: boleGetCssVar('color', 'primary'); |
| | | } |
| | | } |
| | | } |
| | | </style> |