style: 统一输入框和选择器宽度为240px并优化卡片布局

- 将多处输入框和选择器的宽度从200px调整为240px
- 优化卡片布局结构,添加分割卡片提升可读性
- 移除部分冗余的刷新按钮和样式代码
- 调整日期选择器等表单元素的宽度为240px
This commit is contained in:
pikachu1995@126.com
2025-08-21 16:41:27 +08:00
parent 3867d51d92
commit 099941a54e
63 changed files with 355 additions and 317 deletions

View File

@@ -15,13 +15,13 @@
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
style="width: 240px"
/>
</Form-item>
<Form-item label="状态">
<Select
v-model="searchForm.distributionStatus"
style="width: 200px"
style="width: 240px"
>
<Option
v-for="item in distributionStatusList"
@@ -42,6 +42,8 @@
>
</Form>
</Row>
</Card>
<Card>
<Table
:loading="loading"
border

View File

@@ -15,7 +15,7 @@
v-model="searchForm.memberName"
placeholder="请输入会员名称"
clearable
style="width: 200px"
style="width: 240px"
/>
</Form-item>
<Button
@@ -26,6 +26,8 @@
>
</Form>
</Row>
</Card>
<Card>
<Table
class="mt_10"
:loading="loading"

View File

@@ -5,15 +5,15 @@
<Form-item label="会员名称" class="flex" prop="memberName">
<Input
type="text" placeholder="请输入会员名称" v-model="searchForm.memberName" clearable
style="width: 200px"></Input>
style="width: 240px"></Input>
</Form-item>
<Form-item label="编号" class="flex">
<Input
type="text" placeholder="请输入编号" v-model="searchForm.sn" clearable
style="width: 200px"></Input>
style="width: 240px"></Input>
</Form-item>
<Form-item label="状态"
style="width: 200px">
style="width: 240px">
<Select v-model="searchForm.distributionCashStatus" clearable style="width: 150px">
<Option v-for="item in cashStatusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
</Select>
@@ -22,6 +22,8 @@
<Button @click="handleSearch" type="primary">搜索</Button>
</Form-item>
</Form>
</Card>
<Card>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10"></Table>
<Row type="flex" justify="end" class="page padding-row">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>

View File

@@ -4,10 +4,12 @@
<Form @keydown.enter.native.prevent="handleSearch" ref="searchForm" :model="searchForm" inline :label-width="70"
class="search-form">
<Form-item label="商品名称" prop="goodsName">
<Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 200px" />
<Input type="text" v-model="searchForm.goodsName" placeholder="请输入商品名称" clearable style="width: 240px" />
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Card>
<Card>
<Row class="operation" style="margin:10px 0;">
<Button @click="delAll" type="primary">批量下架</Button>
</Row>

View File

@@ -8,7 +8,7 @@
v-model="searchForm.orderSn"
placeholder="请输入订单编号"
clearable
style="width: 200px"
style="width: 240px"
/>
</Form-item>
<Form-item label="分销商" prop="distributionName">
@@ -17,21 +17,23 @@
v-model="searchForm.distributionName"
placeholder="请输入分销商名称"
clearable
style="width: 200px"
style="width: 240px"
/>
</Form-item>
<Form-item label="店铺名称">
<Select v-model="searchForm.storeId" placeholder="请选择" @on-query-change="searchChange" filterable
clearable style="width: 150px">
clearable style="width: 240px">
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.storeName }}</Option>
</Select>
</Form-item>
<Form-item label="订单时间">
<DatePicker type="daterange" v-model="timeRange" format="yyyy-MM-dd" placeholder="选择时间"
style="width: 210px"></DatePicker>
style="width: 240px"></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn">搜索</Button>
</Form>
</Card>
<Card>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
<template slot-scope="{row}" slot="goodsMsg">
<div class="goods-msg">