| | |
| | | <template> |
| | | <view> |
| | | <view class="inspection-app"> |
| | | <!-- 刷新页面后的顶部提示框 --> |
| | | <view class="tips" :class="{ 'tips-ani': tipShow }">刷新成功</view> |
| | | <view :class="{ 'tips-ani': tipShow }" class="tips">刷新成功</view> |
| | | |
| | | <view class="newsTab"> |
| | | <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="button" |
| | | active-color="#87cefa"></uni-segmented-control> |
| | | <view class="content"> |
| | | <view v-show="current===0"> |
| | | <!-- 基于 uni-list 的页面布局 --> |
| | | <uni-list> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <uni-list-item style="margin-top: 10px;background-color:#EFEFF4;border-radius: 5px;" |
| | | class="list-item" direction="column" v-for="item in data" :key="item.id" |
| | | :to="'Add?id='+item.id+'&releaseNo='+item.releaseNo"> |
| | | <!-- 通过header插槽定义列表的标题 --> |
| | | <template v-slot:header> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.releaseNo"/> |
| | | </view> |
| | | </template> |
| | | <!-- 通过body插槽定义列表内容显示 --> |
| | | <template v-slot:body> |
| | | <view style="margin-top: 0;"> |
| | | <view class="uni-content"> |
| | | <view class="uni-note"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">送检批次号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.billNo"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.createDate"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.createBy"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">产线:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa015"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- <view class="uni-title-sub uni-ellipsis-2">--> |
| | | <!-- <view class="form-group">--> |
| | | <!-- <label class="form-label">颜色:</label>--> |
| | | <!-- <input class="form-input" disabled="true" type="text" v-model="item.colorName"/>--> |
| | | <!-- </view>--> |
| | | <!-- </view>--> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品名称:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemName"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品型号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemModel"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">送检数量:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.quantity"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">报工人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.bgr"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.fcheckBy"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检测结果:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | <!-- 通过 loadMore 组件实现上拉加载效果,如需自定义显示内容,可参考:https://ext.dcloud.net.cn/plugin?id=29 --> |
| | | <!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> --> |
| | | |
| | | <!-- <view class="fab" @click="handleFabClick"> |
| | | <text class="fab-icon">+</text> |
| | | </view> --> |
| | | <view class="plus-button" @click="handleFabClick"> |
| | | + |
| | | </view> |
| | | <!-- 顶部筛选区 --> |
| | | <view class="filter-section"> |
| | | <view class="filter-controls" style="margin-bottom: 5px;"> |
| | | <view class="status-tabs"> |
| | | <button :class="['tab-button', current === 0 ? 'active' : '']" |
| | | @click="onClickItem({currentIndex: 0})">未提交({{ uncheckedCount }}) |
| | | </button> |
| | | <button :class="['tab-button', current === 1 ? 'active' : '']" |
| | | @click="onClickItem({currentIndex: 1})">{{ checkedCount }} |
| | | </button> |
| | | </view> |
| | | <view v-show="current===1"> |
| | | <uni-list> |
| | | <!-- to 属性携带参数跳转详情页面,当前只为参考 --> |
| | | <uni-list-item style="margin-top: 10px;background-color:#EFEFF4;border-radius: 5px;" |
| | | class="list-item" direction="column" v-for="item in data" :key="item.id" |
| | | :to="'Add?id='+item.id+'&releaseNo='+item.releaseNo"> |
| | | <!-- 通过header插槽定义列表的标题 --> |
| | | <template v-slot:header> |
| | | <view class="form-group uni-title" style="margin-bottom: 0;"> |
| | | <label class="form-label">检验单号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.releaseNo"/> |
| | | </view> |
| | | </template> |
| | | <!-- 通过body插槽定义列表内容显示 --> |
| | | <template v-slot:body> |
| | | <view style="margin-top: 0;"> |
| | | <view class="uni-content"> |
| | | <view class="uni-note"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">送检批次号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.billNo"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建时间:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.createDate"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">创建人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.createBy"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">产线:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.daa015"/> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">物料编码:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemNo"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- <view class="uni-title-sub uni-ellipsis-2">--> |
| | | <!-- <view class="form-group">--> |
| | | <!-- <label class="form-label">颜色:</label>--> |
| | | <!-- <input class="form-input" disabled="true" type="text" v-model="item.colorName"/>--> |
| | | <!-- </view>--> |
| | | <!-- </view>--> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品名称:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemName"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">产品型号:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.itemModel"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">送检数量:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.quantity"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-title-sub uni-ellipsis-2"> |
| | | <view class="form-group"> |
| | | <label class="form-label">报工人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.bgr"/> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检验人:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.fcheckBy"/> |
| | | </view> |
| | | </view> |
| | | <view class="uni-note" style="color: red"> |
| | | <view class="form-group"> |
| | | <label class="form-label lab">检测结果:</label> |
| | | <input class="form-input" disabled="true" type="text" v-model="item.fcheckResu"/> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | </uni-list-item> |
| | | </uni-list> |
| | | <view class="filter-controls" style="margin-bottom: 5px;"> |
| | | <view class="search-container"> |
| | | <input v-model="searchValue" class="search-input" placeholder="请输入检验单号或物料编码" |
| | | @confirm="handleSearch"/> |
| | | <button class="search-button" @click="handleSearch">搜索</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 检验单列表 --> |
| | | <view class="inspection-list"> |
| | | <!-- 检验单卡片 --> |
| | | <view v-for="item in data" :key="item.id" class="inspection-card" |
| | | @click="navigateToDetail(item)"> |
| | | <view class="card-header"> |
| | | <view class="card-title">检验单号: {{ item.releaseNo }}</view> |
| | | <view :class="{'status-pending': current === 0, 'status-pass': item.fcheckResu === '合格', 'status-fail': item.fcheckResu === '不合格'}" |
| | | class="status"> |
| | | {{ current === 0 ? '未提交' : (item.fcheckResu ? item.fcheckResu : '已提交') }} |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="card-body"> |
| | | <view class="info-row"> |
| | | <view class="info-item"> |
| | | <view class="info-label">送检批次号</view> |
| | | <view class="info-content">{{ item.billNo }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">创建时间</view> |
| | | <view class="info-content">{{ item.createDate }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="info-row"> |
| | | <view class="info-item"> |
| | | <view class="info-label">物料信息</view> |
| | | <view class="info-content">{{ item.itemNo }} | {{ item.itemName }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="info-row"> |
| | | <view class="info-item"> |
| | | <view class="info-label">送检数量</view> |
| | | <view class="info-content highlight">{{ item.quantity }}</view> |
| | | </view> |
| | | <view class="info-item"> |
| | | <view class="info-label">产线</view> |
| | | <view class="info-content">{{ item.lineNo }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view v-if="item.fcheckBy" class="info-row"> |
| | | <view class="info-item"> |
| | | <view class="info-label">检验人</view> |
| | | <view class="info-content">{{ item.fcheckBy }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="meta-info"> |
| | | <view class="meta-item">创建人: {{ item.createBy }}</view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="card-actions"> |
| | | <button class="primary">{{ current === 0 ? '继续检验' : '查看详情' }}</button> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 添加按钮 --> |
| | | <view v-if="current === 0" class="plus-button" @click="handleFabClick"> |
| | | <view class="plus-icon">+</view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | items: ['未提交', '已提交'], |
| | | current: 0, |
| | | data: [], |
| | | tipShow: false, // 是否显示顶部提示框 |
| | | uncheckedCount: 0, |
| | | checkedCount: '已提交', |
| | | searchValue: '', |
| | | pageIndex: 1, |
| | | limit: 20, |
| | | totalPage: 0, |
| | | totalCount: 0, |
| | | noData: false, // 没有更多数据了 |
| | | isLoading: false, // 是否正在加载 |
| | | tipShow: false |
| | | }; |
| | | }, |
| | | onLoad() { |
| | |
| | | }, |
| | | methods: { |
| | | init() { |
| | | |
| | | let result = "未完成"; |
| | | if (this.current == 1) { |
| | | if (this.current === 1) { |
| | | result = "已完成"; |
| | | } |
| | | |
| | |
| | | pageIndex: this.pageIndex, |
| | | limit: this.limit, |
| | | createUser: this.$loginInfo.account, |
| | | result: result |
| | | result: result, |
| | | searchValue: this.searchValue |
| | | } |
| | | }).then(res => { |
| | | if (this.pageIndex === 1) { |
| | | // 如果是第一页,直接覆盖原数据 |
| | | this.data = res.data.tbBillList; |
| | | } else { |
| | | |
| | | if (res.data.tbBillList.length > 0) { |
| | | // 如果是下一页,追加新数据 |
| | | this.data = [...this.data, ...res.data.tbBillList]; |
| | | } |
| | | |
| | | } |
| | | this.totalCount = res.data.totalCount; |
| | | |
| | | this.totalCount = res.totalCount; |
| | | this.totalPage = Math.ceil(this.totalCount / this.limit); |
| | | |
| | | this.noData = this.pageIndex >= this.totalPage; |
| | | this.isLoading = false; // 结束加载 |
| | | |
| | | // 更新计数 |
| | | if (this.current === 1) { |
| | | this.checkedCount = '已提交(' + this.totalCount + ')'; |
| | | } else { |
| | | this.uncheckedCount = this.totalCount; |
| | | } |
| | | }).catch(() => { |
| | | this.isLoading = false; // 出现错误时结束加载 |
| | | }); |
| | |
| | | this.init(); |
| | | } |
| | | }, |
| | | handleSearch() { |
| | | this.pageIndex = 1; |
| | | this.data = []; |
| | | this.init(); |
| | | }, |
| | | navigateToDetail(item) { |
| | | uni.navigateTo({ |
| | | url: 'Add?id=' + item.id + '&releaseNo=' + item.releaseNo |
| | | }); |
| | | } |
| | | }, |
| | | /** |
| | | * 下拉刷新回调函数 |
| | | */ |
| | | onPullDownRefresh() { |
| | | this.pageIndex = 1; |
| | | this.data = []; |
| | | //重新执行一遍查询 |
| | | this.init(); |
| | | this.tipShow = true; |
| | | //关闭动画 |
| | | uni.stopPullDownRefresh(); |
| | | |
| | | setTimeout(function () { |
| | | setTimeout(() => { |
| | | this.tipShow = false; |
| | | }, 3000); |
| | | }, |
| | |
| | | //每次进入页面都会执行的方法 |
| | | this.pageIndex = 1; |
| | | this.data = []; |
| | | //this.current = 0 |
| | | this.init(); |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | @import '@/common/uni-ui.scss'; |
| | | |
| | | .uni-note { |
| | | margin-top: 0; |
| | | <style> |
| | | /* 基础样式重置 */ |
| | | .inspection-app { |
| | | padding: 10px; |
| | | background-color: #f5f7fa; |
| | | min-height: 100vh; |
| | | } |
| | | |
| | | /* Set the input backgrounds to be gray */ |
| | | .form-input { |
| | | background-color: #f2f2f2; |
| | | /* Or any other shade of gray you prefer */ |
| | | /* 顶部筛选区 */ |
| | | .filter-section { |
| | | /* margin-bottom: 24px; */ |
| | | } |
| | | |
| | | /* Ensure automatic adaptation based on page size */ |
| | | .form-group { |
| | | /* 新增搜索框样式 */ |
| | | .search-container { |
| | | display: flex; |
| | | flex: 1; |
| | | margin: 0 10px; |
| | | height: 36px; |
| | | /* 与其他控件高度一致 */ |
| | | } |
| | | |
| | | .search-input { |
| | | flex: 1; |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px 0 0 4px; |
| | | font-size: 14px; |
| | | background-color: white; |
| | | } |
| | | |
| | | .search-button { |
| | | padding: 0 12px; |
| | | border: 1px solid #3498db; |
| | | border-radius: 0 4px 4px 0; |
| | | background-color: #3498db; |
| | | color: white; |
| | | font-size: 14px; |
| | | margin: 0; |
| | | } |
| | | |
| | | .filter-controls { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 5px; |
| | | } |
| | | |
| | | .dropdown-filter { |
| | | min-width: 70px; |
| | | } |
| | | |
| | | .filter-label { |
| | | font-size: 14px; |
| | | color: #7f8c8d; |
| | | } |
| | | |
| | | .picker { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | min-width: 120px; |
| | | } |
| | | |
| | | .status-tabs { |
| | | display: flex; |
| | | border-radius: 4px; |
| | | overflow: hidden; |
| | | background-color: #ecf0f1; |
| | | flex: 1; |
| | | min-width: 200px; |
| | | } |
| | | |
| | | .tab-button { |
| | | padding: 0px 16px; |
| | | border: none; |
| | | background: none; |
| | | font-size: 14px; |
| | | transition: all 0.3s; |
| | | margin: 0; |
| | | height: 35px; |
| | | } |
| | | |
| | | .tab-button.active { |
| | | background-color: #3498db; |
| | | color: white; |
| | | } |
| | | |
| | | /* 检验单列表 */ |
| | | .inspection-list { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 20px; |
| | | } |
| | | |
| | | /* 检验单卡片 */ |
| | | .inspection-card { |
| | | background-color: white; |
| | | border-radius: 8px; |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | overflow: hidden; |
| | | transition: all 0.3s; |
| | | } |
| | | |
| | | .card-header { |
| | | padding: 16px; |
| | | border-bottom: 1px solid #eee; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | .form-label { |
| | | margin-bottom: 0; |
| | | border-bottom: 1px solid #FFFFFF; |
| | | padding: 5px; |
| | | font-size: 12px; |
| | | width: 80px; |
| | | /* Adjust the font size as per your requirement */ |
| | | } |
| | | |
| | | .form-input { |
| | | .card-title { |
| | | font-size: 16px; |
| | | font-weight: 600; |
| | | flex: 1; |
| | | margin-bottom: 0; |
| | | border-bottom: 1px solid #c7c7c7; |
| | | padding: 5px; |
| | | margin: 0 8px; |
| | | } |
| | | |
| | | .status { |
| | | font-size: 12px; |
| | | background-color: #FFFFFF; |
| | | /* Adjust the font size as per your requirement */ |
| | | padding: 4px 8px; |
| | | border-radius: 4px; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .plus-button { |
| | | position: fixed; |
| | | bottom: 20px; |
| | | right: 20px; |
| | | width: 60px; |
| | | height: 60px; |
| | | border-radius: 50%; |
| | | background-color: #007bff; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | line-height: 59px; |
| | | font-size: 24px; |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | margin-bottom: 35px; |
| | | .status-pending { |
| | | background-color: #f39c12; |
| | | color: white; |
| | | } |
| | | |
| | | page { |
| | | .status-pass { |
| | | background-color: #00cd00; |
| | | color: white; |
| | | } |
| | | |
| | | .status-fail { |
| | | background-color: #ff0000; |
| | | color: white; |
| | | } |
| | | |
| | | .card-body { |
| | | padding: 16px; |
| | | } |
| | | |
| | | .info-row { |
| | | display: flex; |
| | | flex-direction: column; |
| | | box-sizing: border-box; |
| | | background-color: #efeff4; |
| | | min-height: 100%; |
| | | height: auto; |
| | | margin-bottom: 12px; |
| | | gap: 16px; |
| | | } |
| | | |
| | | .info-item { |
| | | flex: 1; |
| | | } |
| | | |
| | | .info-label { |
| | | display: block; |
| | | font-size: 12px; |
| | | color: #7f8c8d; |
| | | margin-bottom: 4px; |
| | | } |
| | | |
| | | .info-content { |
| | | font-size: 14px; |
| | | color: #2c3e50; |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | .highlight { |
| | | font-weight: 600; |
| | | color: #2c3e50; |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .meta-info { |
| | | display: flex; |
| | | gap: 16px; |
| | | font-size: 12px; |
| | | color: #95a5a6; |
| | | margin-top: 12px; |
| | | } |
| | | |
| | | .meta-item { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 4px; |
| | | } |
| | | |
| | | .card-actions { |
| | | padding: 12px 16px; |
| | | border-top: 1px solid #eee; |
| | | display: flex; |
| | | gap: 8px; |
| | | } |
| | | |
| | | button { |
| | | padding: 8px 16px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | transition: all 0.2s; |
| | | flex: 1; |
| | | } |
| | | |
| | | button.primary { |
| | | background-color: #3498db; |
| | | color: white; |
| | | border-color: #2980b9; |
| | | } |
| | | |
| | | /* 刷新提示样式 */ |
| | | .tips { |
| | | color: #67c23a; |
| | | font-size: 14px; |
| | |
| | | opacity: 1; |
| | | } |
| | | |
| | | .content { |
| | | width: 100%; |
| | | /* 加号按钮样式 */ |
| | | .plus-button { |
| | | position: fixed; |
| | | bottom: 20px; |
| | | right: 20px; |
| | | width: 60px; |
| | | height: 60px; |
| | | border-radius: 50%; |
| | | background-color: #3498db; |
| | | color: #ffffff; |
| | | text-align: center; |
| | | line-height: 59px; |
| | | font-size: 24px; |
| | | cursor: pointer; |
| | | z-index: 1000; |
| | | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| | | } |
| | | |
| | | .list-picture { |
| | | width: 100%; |
| | | height: 145px; |
| | | /* 响应式设计 */ |
| | | @media (min-width: 768px) { |
| | | .inspection-list { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); |
| | | } |
| | | |
| | | .info-row { |
| | | flex-direction: row; |
| | | } |
| | | } |
| | | |
| | | .thumb-image { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | @media (min-width: 300px) { |
| | | .inspection-list { |
| | | display: grid; |
| | | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); |
| | | } |
| | | |
| | | .ellipsis { |
| | | display: flex; |
| | | overflow: hidden; |
| | | } |
| | | .info-row { |
| | | flex-direction: row; |
| | | } |
| | | |
| | | .uni-ellipsis-1 { |
| | | overflow: hidden; |
| | | white-space: nowrap; |
| | | text-overflow: ellipsis; |
| | | } |
| | | |
| | | .uni-ellipsis-2 { |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | display: -webkit-box; |
| | | -webkit-line-clamp: 2; |
| | | -webkit-box-orient: vertical; |
| | | .picker { |
| | | padding: 8px 12px; |
| | | border: 1px solid #ddd; |
| | | border-radius: 4px; |
| | | background-color: white; |
| | | font-size: 14px; |
| | | min-width: 10px; |
| | | } |
| | | } |
| | | </style> |