uni-app实现仿美团商品左右菜单联动效果
摘要：<template> <view class="app-container"> <view class="app-bg"></view> <ZPaging ref="paging" v-model="showList" :auto="false" :refresher-enabled="false" :loading-more-enabled="false"> <template #top> <view class="ZPaging_top"> <view :style="{height: topHeight}"></view></template></ZPaging></view></view></template><!--autointro-->...
<template>
<view class="app-container">
<view class="app-bg"></view>
<ZPaging ref="paging" v-model="showList" :auto="false" :refresher-enabled="false" :loading-more-enabled="false">
<template #top>
<view class="ZPaging_top">
<view :style="{height: topHeight}">
</view>
<view class="task-top">
<u-icon name="arrow-left" @click="goBack()" color="#fff" />
<view class="task-name">审核</view>
</view>
<TopCard :data="{taskName,taskPeriodNo,executeDeptReportTime,reportShould,reportAlready,reportNot}"></TopCard>
<view style="padding: 18rpx 24rpx">
<aj-tab :list="tabsData" lineColor="#3F6BD2" activeColor="#3F6BD2" inactiveColor="#A8A8A8"
v-model="activeTab" label="monitorIndexKey" text="monitorIndexName"
@change="clickTabs"></aj-tab>
</view>
</view>
</template>
<view class="category-wrap">
<!--类别列表-->
<view class="category-content">
<view class="cotegory-type">
<view class="category-tab">
<scroll-view scroll-y="true" class="scroll-Y scroll_list" scroll-with-animation="true"
:scroll-into-view="tocate">
<view class="tab_item" @click="selectCategory(TAB_ALL, TAB_ALL)">
<view class="tab_item_text" :class="select_index == TAB_ALL? 'active' : ''">
<text>全部</text>
</view>
</view>
<view class="tab_item" v-for="(item, index) in reportData" :key="index"
@click="selectCategory(item.showSort, item.showSort)"
:id="ID_PREFIX + item.showSort">
<view class="tab_item_text" :class="index == select_index ? 'active' : ''">
<text>{{ item.productName }}</text>
<u--image
v-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) > 0"
:src="item.qoq > Number(item.checkAmplitudeUp) * 100 ? ArrowUpIcon : ArrowDownIcon "
height="18rpx" width="12rpx"></u--image>
<u--image
v-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) < 0"
:src="item.qoq < Number(item.checkAmplitudeDown) * 100 ? ArrowUpIcon : ArrowDownIcon "
height="18rpx" width="12rpx"></u--image>
</view>
</view>
</scroll-view>
</view>
<view class="category-list">
<view class="tooltip" v-if="showAllTabList">
如数据异常，点击
<i class="icon iconfont icon-biaoji"
style="color: #CCCCCC;font-size: 24rpx;display: inline-block;"></i>
标记，在 单位明细 处理
</view>
<scroll-view v-if="showAllTabList" @scroll="cateScroll" scroll-y="true"
class="scroll-Y scroll_list scroll_list_right" scroll-with-animation="true"
:scroll-into-view="toview">
<block v-for="(item, index) in reportData" :key="index">
<view class="list_item selectItem" :id="ID_PREFIX + item.showSort">
<view class="list_item_top">
<view class="list_item_top_left">
<text class="title">{{item.productName}}<text style="color: #999999;">-</text></text>
<text class="subtitle">{{ item.specificationGrade }}</text>
</view>
<view class="list_item_top_right">
<view class="font16">
<text
v-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) > 0"
:class="item.qoq > Number(item.checkAmplitudeUp) * 100 ? 'priceRed' : 'priceGreen'">{{item.monitoringData == null ? '' : item.monitoringData}}</text>
<text
v-else-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) < 0"
:class="item.qoq < Number(item.checkAmplitudeDown) * 100 ? 'priceRed' : 'priceGreen'">{{item.monitoringData == null ? '' : item.monitoringData}}</text>
<text v-else
class="pirce">{{item.monitoringData == null ? '' : item.monitoringData}}</text>
</view>
<text class="units">{{ item.units == null ? '' : item.units }}</text>
</view>
</view>
<u-line></u-line>
<view class="list_item_center">
<view v-for="(items, i) in item.childDataList" :key="i"
class="list_item_center_item" :id="items.productId">
<view class="item_top">
<view class="item_left">
<text class="contentExecuteDeptName"
style="margin-right: 20rpx;">{{ items.executeDeptName }}</text>
<view class="contentIcon"
@click="handleChangeMark(item, items, index, i)"><i
class="icon iconfont icon-biaoji"
:style="{ color: items.dataErrorFlag == 1 ? '#F33A3A' : '#CCCCCC' }"></i>
</view>
</view>
<view class="item_right">
<view class="mgr20">
<text
v-if="items.qoq !== null && Number(items.qoq) != 0 && Number(items.qoq) > 0"
:class="items.qoq > items.checkAmplitudeUp ? 'priceRed' : 'priceGreen'">{{items.monitoringData == null ? '' : items.monitoringData}}</text>
<text
v-else-if="items.qoq !== null && Number(items.qoq) != 0 && Number(items.qoq) < 0"
:class="items.qoq < items.checkAmplitudeDown ? 'priceRed' : 'priceGreen'">{{items.monitoringData == null ? '' : items.monitoringData}}</text>
<text v-else
class="pirce">{{items.monitoringData == null ? '' : items.monitoringData}}</text>
</view>
<view class="item_right_info"
@click="handleShowExplainValue(items, index, i)"><i
class="icon iconfont icon-xiaoxi"
:style="{ color : items.explainValue == null || items.explainValue == '' ? '#CCCCCC' : '#4385F5' }"><u-badge
v-if="items.explainValue" class="drop"
:absolute="true" :offset="[0,2]" :isDot="true"
type="error"></u-badge></i></view>
</view>
</view>
<view v-show="items.showExplainValue" class="item_bottom">
{{ items.explainValue }}
</view>
</view>
</view>
</view>
</block>
</scroll-view>
<scroll-view v-else scroll-y="true" class="scroll-Y scroll_list" croll-with-animation="true"
:scroll-into-view="toview">
<view class="allList">
<block v-for="(item, index) in reportData" :key="index">
<view class="list_item allList_item" :id="ID_PREFIX + item.showSort"
@click="selectCategory(item.showSort, item.showSort)">
<view class="list_item_top">
<view class="sortNum">
{{ item.showSort + 1 }}
</view>
<view class="list_item_top_left">
<text class="title">{{item.productName}}<text style="color: #999999;">-</text></text>
<text class="subtitle">{{ item.specificationGrade }}</text>
</view>
<view class="list_item_top_right rightText">
<view class="font16">
<text
v-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) > 0"
:class="item.qoq > Number(item.checkAmplitudeUp) * 100 ? 'priceRed' : 'priceGreen'">{{item.monitoringData == null ? '' : item.monitoringData}}</text>
<text
v-else-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) < 0"
:class="item.qoq < Number(item.checkAmplitudeDown) * 100 ? 'priceRed' : 'priceGreen'">{{item.monitoringData == null ? '' : item.monitoringData}}</text>
<text v-else
class="pirce">{{item.monitoringData == null ? '' : item.monitoringData}}</text>
</view>
<text
class="units">{{ item.units == null ? '' : item.units }}</text>
</view>
</view>
</view>
</block>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
<template #bottom>
<view class="bottom-button ZPaging_bottom">
<view type="button" class="button btn-save" @click="handleClickDetail"><u-icon style="margin-right: 5rpx;"
name="list-dot" color="#4385f5"></u-icon>单位明细</view>
<view type="button" class="button btn-report" @click="handleClickExamine"><u-icon style="margin-right: 5rpx;"
name="eye" color="#fff"></u-icon>一键审核</view>
</view>
</template>
</ZPaging>
<!-- 二次审核确认 -->
<u-modal :show="showSecondCheck" @confirm="confimSecondCheck" ref="uModal" :showCancelButton="true" @cancel="showSecondCheck = false">
<ZPaging ref="modalPaging" v-model="showModalList" :fixed="false" :paging-style="{ height: '600rpx' }" :auto="false" :refresher-enabled="false">
<template #top>
<u-tabs
:activeStyle="{ background: '#3b7cff', 'border-radius': '6px 6px 6px 6px', color: '#fff !important', padding: '4px 12px' }"
:current="tabsModalCurrent"
:inactiveStyle="{
background: '#EDEEF2',
'border-radius': '12rpx 12rpx 12rpx 12rpx',
color: '#8998AC !important',
padding: '8rpx 24rpx',
}"
:list="tabsData"
keyName="monitorIndexName"
lineHeight="0"
@click="clickModalTabs"
>
</u-tabs>
</template>
<view class="slot-content">
<uni-collapse ref="collapseHeight" accordion>
<uni-collapse-item v-for="(item, idx) in showModalList" :key="item.productId" :border="false"
:open="false" :show-animation="false" :show-arrow="true" class="uni-collapse-item"
titleBorder="none">
<template v-slot:title>
<view style="">
<view style="width: 5%;" class="serialNumber">{{ idx + 1 }}.</view>
<view class="productName"><text class="productNameText">{{ item.productName }}</text></view>
<view class="priceName">{{item.monitoringData == null ? '' : item.monitoringData}}</view>
<view style="width: 5%;" :style="{ color: item.isShowArrowDown ? '#009900' : item.isShowArrowUp ? '#FE4A3B' : '' }"
class="monitoringData">
<u--image
v-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) > 0"
:src="item.qoq > Number(item.checkAmplitudeUp) * 100 ? ArrowUpIcon : ArrowDownIcon "
height="18rpx" width="12rpx"></u--image>
<u--image
v-if="item.qoq !== null && Number(item.qoq) != 0 && Number(item.qoq) < 0"
:src="item.qoq < Number(item.checkAmplitudeDown) * 100 ? ArrowUpIcon : ArrowDownIcon "
height="18rpx" width="12rpx"></u--image>
</view>
<view style="width: 5%;" class="down">
<u-icon size="12" name="arrow-down"></u-icon>
</view>
</view>
</template>
<view class="fold-content">
<view :style="{ flexDirection: item.specificationGrade.length > 14 ? 'column' : '' }" class="top">
<view class="specifications hide"
>规格：
<text style="white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;display: inline-block;line-height: 1;">{{ item.specificationGrade }}</text>
</view
>
<view v-if="item.units !== null && item.units != ''" class="units hide">
单位：
<text style=" white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;line-height: 1;">{{ item.units }}</text>
</view
>
</view>
<view class="explain hide">
<text class="characters">指标解释：</text>
<textarea ref="textarea" v-model="item.explainValue" :hold-keyboard="true"
:maxlength="140" auto-height border="none" class="textarea"
placeholder="请选择指标解释" placeholder-class="explain-textarea" @click="clickTextarea(item)"/>
</view>
</view>
</uni-collapse-item>
</uni-collapse>
</view>
</ZPaging>
</u-modal>
<!-- 指标解释选择 -->
<u-picker ref="uPicker" :closeOnClickOverlay="true" :columns="explainValueData" :show="explainValueShow"
keyName="dictLabel" @cancel="explainValueShow = false" @close="explainValueShow = false"
@confirm="selectClick(item, $event)"></u-picker>
<uni-popup ref="inputDialog" type="center">
<!-- 自定义指标解释弹窗 -->
<uni-popup-dialog ref="inputClose" :value="msgValue" mode="input" placeholder="请输入指标解释"
title="请输入指标解释" @confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>
</view>
</view>
</template>
<script>
import {
getColumn,
getProductMonitorMobil,
markAbnormalData,
escalation,
updateState
} from "@/api/myTodoList/index.js";
import ZPaging from '../../../components/zpaging/components/z-paging/z-paging.vue'
import AjTab from '../components/aj-tab/aj-tab.vue'
import TopCard from '../components/topCard.vue'
import uniCollapse from '../components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '../components/uni-collapse-item/uni-collapse-item.vue'
import uniPopup from '../components/uni-popup/uni-popup.vue'
import uniPopupDialog from '../components/uni-popup-dialog/uni-popup-dialog.vue'
const ID_PREFIX = 'pro_'
const TAB_ALL = 'all'
export default {
components: {
ZPaging,
AjTab,
TopCard,
uniCollapse,
uniCollapseItem,
uniPopup,
uniPopupDialog
},
onLoad(options) {
let receive = JSON.parse(decodeURIComponent(options.queryParams));
this.taskModelId = receive.taskModelId;
this.taskName = receive.taskName;
this.taskPeriodNo = receive.taskPeriodNo;
this.executeDeptId = uni.getStorageSync("DEPTID");
this.getColumnList()
},
onShow() {
this.queryList()
// this.capsule();
},
data() {
return {
ID_PREFIX,
showList: [],
topHeight: '54px',
tabsData: [],
activeTab: null,
reportData: [],
isClick: false,
tocate: null,
toview: null,
TAB_ALL,
select_index: TAB_ALL,
// 是否展示全部Tab下面的数据
showAllTabList: false,
DetailIcon: require("static/images/mytodolist/detail-icon.png"),
ReportIcon: require("static/images/mytodolist/report-icon.png"),
ArrowDownIcon: require("static/images/mytodolist/arrow-down.png"),
ArrowUpIcon: require("static/images/mytodolist/arrow-up.png"),
// 页面初始化传参
taskModelId: "",
taskName: "",
taskPeriodNo: "",
// 指标解释列表
tabsData: [],
// 左侧tabs栏数据
listTabsData: [],
// 审核列表数据
commodityData: {},
tabsCurrent: 0, // 展示 tabs哪一项的
/** 通过是否是最高级判断：审核或者审核完毕 */
examineOrAuditCompleted: "一键审核",
// 本地存储当前登录人的deptId
executeDeptId: undefined,
// 判断当前登录人是不是最高级
isHighestLevel: undefined,
// 指标解释选择器数据
explainValueData: [],
// 是否显示指标解释选择器
explainValueShow: false,
// 判断点击的是第几项
idx: "",
// 弹出框输入框默认数据
msgValue: "",
// 倒计时秒数
seconds: 3,
// 定时器的 Id
timer: null,
// 二次审核弹窗
showSecondCheck: false,
activeIndex: -1,
title: '全部',
executeDeptReportTime: '',
reportShould: '',
reportAlready: '',
reportNot: '',
dataErrorFlag: 1,
deptId: '',
monitorData: '',
monitorIndexKey: '',
productId: '',
taskExecuteId: '',
display: false,
//
commodityModalData: [],
tabsModalData: [],
ModalMonitorIndexKey: '',
modalPaging: null,
tabsModalCurrent: 0,
showModalList: [],
openIndex: 0,
}
},
methods: {
clickTextarea(item){
uni.hideKeyboard();
this.explainValueShow = true;
this.msgValue = item.explainValue;
this.openIndex = this.commodityData[this.ModalMonitorIndexKey].findIndex((obj) => obj.productId == item.productId);
},
goBack() {
uni.switchTab({
url: '/pages/myTodoList/index'
})
},
getColumnList() {
getColumn().then((res) => {
if (res.code === 200) {
this.explainValueData.push(res.data);
}
});
},
/** 选择指标解释 */
selectClick(item, e) {
if (e.value[0].dictLabel === "自定义解释") {
this.$refs.inputDialog.open();
this.explainValueShow = false;
} else {
this.explainValueShow = false;
this.commodityData[this.ModalMonitorIndexKey][this.openIndex]["explainValue"] = e.value[0].dictLabel;
this.$forceUpdate()
}
},
/** 关闭输入框指标解释*/
dialogInputConfirm(val) {
this.explainValueShow = false;
this.commodityData[this.ModalMonitorIndexKey][this.openIndex]["explainValue"] = val;
// 往指标解释里面push数据，方便其他商品直接选择
const containsString = this.explainValueData[0].some((obj) => Object.values(obj).some((a) => a == val));
if (val && !containsString) {
this.explainValueData[0].push({
dictLabel: val,
});
}
// 关闭窗口后，恢复默认内容
this.$refs.inputDialog.close();
},
// 弹窗
queryModalList(){
this.$refs.modalPaging.reload()
this.$refs.modalPaging.setLocalPaging(this.commodityModalData[this.ModalMonitorIndexKey])
},
clickModalTabs(item) {
this.$refs.modalPaging.reload()
let arr = []
this.tabsModalCurrent = item.index;
this.ModalMonitorIndexKey = item.monitorIndexKey
arr = this.commodityModalData[this.ModalMonitorIndexKey]
this.$refs.modalPaging.setLocalPaging(arr);
},
//
queryList() {
this.seconds = 3;
let data = new Object();
data.taskModelId = this.taskModelId;
data.taskPeriodNo = this.taskPeriodNo;
data.deptId = this.executeDeptId;
getProductMonitorMobil(data)
.then((res) => {
this.taskName = res.data.taskModelName; // 任务名称
this.taskPeriodNo = res.data.taskPeriodNo; // 任务期数
this.executeDeptReportTime = res.data.executeDeptReportTime; // 上报截止时间
this.reportShould = res.data.reportShould; // 应报
this.reportAlready = res.data.reportAlready; // 已报
this.reportNot = res.data.reportNot; // 未报
this.commodityModalData = res.data.data;
/** 获取标签也头部导航*/
this.tabsModalData = res.data.head;
this.ModalMonitorIndexKey = this.tabsModalData[0].monitorIndexKey
this.commodityData = res.data.data;
/** 获取标签也头部导航*/
this.tabsData = res.data.head;
this.monitorIndexKey = this.tabsData[0].monitorIndexKey
this.reportData = this.commodityData[this.tabsData[0].monitorIndexKey];
// console.log('this.reportData', this.reportData)
let value = this.commodityData[this.tabsData[this.tabsCurrent].monitorIndexKey]
value.forEach((res) => {
res.childDataList.forEach((item) => {
item.showExplainValue = false;
})
})
this.taskExecuteId = res.data.taskExecuteId; // 任务执行id
})
.catch(() => {
uni.$u.toast("数据获取失败!");
this.timer = setInterval(() => {
this.seconds--;
if (this.seconds <= 0) {
clearInterval(this.timer);
uni.switchTab({
url: "/pages/myTodoList/index",
});
return;
}
uni.$u.toast(`${this.seconds}秒后自动跳转我的待办`);
}, 1000);
});
},
/** 点击标签页的每一项 */
clickTabs(item) {
this.tabsCurrent = item.index;
this.monitorIndexKey = item.monitorIndexKey
this.reportData = this.commodityData[item.monitorIndexKey];
this.select_index = TAB_ALL
},
// 单位明细
handleClickDetail() {
let data = {
taskModelId: this.taskModelId,
taskPeriodNo: this.taskPeriodNo,
taskName: this.taskName,
};
let queryParams = encodeURIComponent(JSON.stringify(data));
uni.navigateTo({
url: "/pages/myTodo/department/indexTabsSwiper?queryParams=" + queryParams,
});
},
// 一键审核
handleClickExamine(){
this.secondAudit();
},
/*左右联动*/
selectCategory(e, index) {
this.isClick = true;
if (index === TAB_ALL) {
this.showAllTabList = false;
this.toview = '';
} else {
this.showAllTabList = true;
this.toview = ID_PREFIX + e;
this.tocate = ID_PREFIX + e;
}
this.select_index = index;
},
cateScroll() {
const query = uni.createSelectorQuery().in(this);
const containerTop = 0; // 假设容器顶部偏移量
query.selectAll(`.selectItem`)
.boundingClientRect((data) => {
for (let i = 0; i < data.length; i++) {
if (data[i].top < 300 && data[i].top > 0) {
!this.isClick && (this.tocate = data[i].id);
!this.isClick && (this.select_index = i);
}
}
this.isClick = false
})
.exec();
},
// 点击信息展示
handleShowExplainValue(item, parentInt, index) {
if (item.explainValue) {
let showExplainValue = item.showExplainValue
this.updateStateData(this.reportData[parentInt].childDataList[index], 'showExplainValue', !
showExplainValue)
}
},
// 更改标记
handleChangeMark({
productId,
monitorIndexKey
}, { deptId, monitorData, dataErrorFlag },parentInt, index) {
if (dataErrorFlag == null || dataErrorFlag == '0') {
dataErrorFlag = 1;
} else if (dataErrorFlag == '1') {
dataErrorFlag = 0
}
let obj = {
productId,
monitorIndexKey,
deptId,
monitorData,
dataErrorFlag,
taskExecuteId: this.taskExecuteId
}
markAbnormalData(obj).then((res) => {
if (res.code === 200) {
this.updateStateData(this.reportData[parentInt].childDataList[index], 'dataErrorFlag',
dataErrorFlag)
wx.showToast({
title: res.msg,
icon: 'success'
})
}
})
},
// 更新
updateStateData(obj, key, value) {
this.$set(obj, key, value)
this.$forceUpdate()
},
/** 二级审核弹窗 */
secondAudit() {
this.showSecondCheck = true;
this.queryModalList()
},
/** 二级审核弹窗确认按钮 */
confimSecondCheck() {
this.handleReportIcon();
},
/** 二级审核弹窗取消按钮 */
cancelSecondCheck() {
this.showSecondCheck = false;
},
/************************ 审核按钮操作开始 **********************/
async handleReportIcon() {
let text;
if (this.isHighestLevel === "1") {
text = `您确认审核通过${this.taskName}的第${this.taskPeriodNo}期的数据吗？`;
let result = await uni.$showModal(text);
if (result.confirm) {
// 最高级审核完毕
this.highestEcamineComplete();
}
} else {
this.dataCheck();
}
},
/** 检查数据是否都符合要求*/
async dataCheck() {
this.tableData = JSON.parse(JSON.stringify(this.commodityData));
let Arr = Object.values(this.tableData).flat();
// let normal = Arr.every((item) => {
// return item.isShowArrowUp == true || item.isShowArrowDown == true;
// });
let normal = Arr.every((item) => {
return (item.isShowArrowUp == true && item.explainValue == null) || (item.isShowArrowDown == true && item.explainValue == null);
});
console.log(Arr, normal);
if (normal) {
let text = `您填写的数据超出浮动阈值了，请确认数据准确性或填写指标解释信息。 如果确认无误，点击确认按钮审核上报。`;
let result = await uni.$showModal(text);
if (result.confirm) {
this.submit();
}
} else {
let text = `您确认上报${this.taskName}的第${this.taskPeriodNo}期的数据吗？`;
let result = await uni.$showModal(text);
if (result.confirm) {
this.submit();
}
}
},
/** 最高级审核完毕*/
highestEcamineComplete() {
// let interpretationData = this.commodityData.map((item) => {
// return Object.assign(item, {
// explainValue: item.explainValue,
// });
// });
let tableData = JSON.stringify(this.commodityData);
let paramsData = new Object();
paramsData.taskModelId = this.taskModelId;
paramsData.taskPeriodNo = this.taskPeriodNo;
paramsData.interpretationData = tableData;
updateState(paramsData)
.then((res) => {
if (res.code === 200) {
uni.$showMsg("审核通过成功");
// 跳转回我的待办
this.goBack();
} else {
uni.$showMsg(res.msg);
}
})
.catch((err) => {
uni.$showMsg("系统未知错误，请反馈给管理员");
});
},
/** 审核上报*/
submit() {
let tableData = JSON.parse(JSON.stringify(this.commodityData));
let paramsData = new Object();
paramsData.executeStatus = "ysb";
paramsData.taskModelId = this.taskModelId;
paramsData.interpretationData = JSON.stringify(tableData);
paramsData.taskPeriodNo = this.taskPeriodNo;
escalation(paramsData).then((res) => {
if (res.code === 200) {
uni.$showMsg(res.msg);
// 跳转回我的待办
this.goBack();
} else {
uni.$showMsg(res.msg);
}
});
},
}
}
</script>
<style lang="scss" scoped>
@import "@/static/style/common.scss";
// 二次审核弹窗样式
::v-deep .u-modal__content {
flex-direction: column !important;
}
// ::v-deep .u-modal {
// // border: 1px solid #f00;
// height: 70vh;
// overflow: auto;
// }
::v-deep .uni-collapse-item__title-arrow {
width: 0;
margin-right: 0;
}
::v-deep .uni-popup {
position: fixed !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #F5F6FA;
}
::v-deep .uni-collapse-item .uni-collapse-item__title-wrap view .productName {
width: 50%!important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-right: 10%;
}
.uni-collapse-item .uni-collapse-item__title-wrap view .monitoringData {
width: 10%!important;
display: flex;
align-items: flex-end;
margin-left: 10%;
}
.uni-collapse-item .uni-collapse-item__title-wrap view .priceName{
width: 30%!important;
}
.uni-collapse-item .fold-content {
padding: 0 20rpx;
}
$zpaging_top: 30vh;
$zpaging_bottom: 10vh;
$category_wrap_height: 100vh - $zpaging_top - $zpaging_bottom;
.app-container {
.app-bg {
height: 436rpx;
background: linear-gradient(180deg, #3f6bd2 0%, #3f6bd2 70%, rgba(67, 133, 245, 0) 100%);
border-radius: 0 0 0 0;
user-select: none;
/* 禁止文本选中 */
-webkit-user-select: none;
/* 兼容 Safari 和 Chrome */
-moz-user-select: none;
/* 兼容 Firefox */
-ms-user-select: none;
/* 兼容 IE/Edge */
-webkit-user-drag: none;
/* 禁止拖拽 */
}
.task-top {
display: flex;
align-items: center;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 36rpx;
color: #ffffff;
padding: 0 24rpx;
line-height: 58rpx;
}
.task-name {
// flex: 1;
margin-left: 40%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom-button {
width: 100%;
display: flex;
position: relative;
bottom: 0;
gap: 0 42rpx;
padding: 32rpx 24rpx;
box-sizing: border-box;
height: $zpaging_bottom;
}
}
.button {
display: flex;
align-items: center;
justify-content: center;
//display: inline-block;
font-size: 28rpx;
padding: 16rpx;
text-align: center;
border-radius: 8rpx;
overflow: hidden;
white-space: nowrap;
width: 330rpx;
height: 70rpx;
}
.btn-save {
flex: 1;
border: 1rpx solid #3F6BD2;
color: #3F6BD2;
background: #FFFFFF;
}
.btn-report {
flex: 1;
background: #3F6BD2;
color: #fff;
}
.category-wrap {
font-size: 24rpx;
.category-content {
flex: 1;
overflow: hidden;
}
.cotegory-type {
width: 100%;
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
height: $category_wrap_height;
}
.category-tab {
min-width: 160rpx;
width: 180rpx;
overflow-y: scroll;
border-radius: 0 10rpx 10rpx 0;
background: #fff;
.tab_item {
height: 40rpx;
line-height: 40rpx;
padding: 20rpx;
margin: 10rpx 0;
padding-left: 0;
font-size: 28rpx;
.tab_item_text {
text-align: start;
padding-left: 20rpx;
display: flex;
align-items: center;
color: #666666;
text {
margin-right: 20rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.active {
border-left: 4rpx solid #3F6BD2;
color: #333333 !important;
}
}
.category-list {
flex: 1;
margin: 0 24rpx 0 10rpx;
padding: 10rpx;
max-width: calc(100% - 210rpx);
border-radius: 10rpx;
padding-top: 0;
.allList {
background: #fff;
border-radius: 10rpx;
.allList_item {
margin-bottom: 0;
// align-items: flex-start;
display: flex;
flex-direction: column;
background-color: #fff;
padding: 10rpx;
color: #999;
.list_item_top {
align-items: flex-start;
line-height: 50rpx;
}
.rightText {
line-height: 50rpx;
height: 60rpx;
}
}
}
.list_item {
border-radius: 10rpx;
display: flex;
flex-direction: column;
margin-bottom: 20rpx;
background-color: #fff;
padding: 10rpx;
color: #999;
.list_item_top {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 20rpx;
// height: 50rpx;
.sortNum {
font-size: 28rpx;
width: 10%;
color: #666;
}
.list_item_top_left {
width: 50%;
.title {
float: left;
display: inline-block;
color: #000;
font-size: 28rpx;
line-height: 50rpx;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.subtitle {
max-width: 50%;
line-height: 54rpx;
font-size: 20rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
}
.list_item_top_right {
flex: 1;
display: flex;
justify-content: flex-end;
line-height: 50rpx;
height: 60rpx;
.units {
margin-left: 4rpx;
width: 40%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
}
.list_item_center {
.list_item_center_item {
.item_top {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60rpx;
.item_left {
max-width: 50%;
display: flex;
align-items: center;
justify-content: flex-start;
.contentExecuteDeptName{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.item_right {
width: 35%;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 32rpx;
.item_right_info {
position: relative;
width: 30%;
.drop {
width: 10rpx;
height: 10rpx;
}
}
}
}
.item_bottom {
background: #F5F6FA;
border-radius: 8rpx;
padding: 20rpx;
color: #999999;
line-height: 24rpx;
white-space: normal;
overflow: hidden;
}
.mgr20 {
margin-right: 50rpx;
width: 70%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
// .redPoint {
// width: 10rpx;
// height: 10rpx;
// background-color: red;
// border-radius: 50%;
// position: absolute;
// right: 0rpx;
// top: 6rpx;
// }
}
}
.tooltip {
height: 30rpx;
line-height: 30rpx;
text-align: center;
font-size: 24rpx;
background-color: #FFF5F5;
color: #F55F5F;
padding: 10rpx;
margin-bottom: 10rpx;
border-radius: 10rpx;
.icon {
color: #CCCCCC;
}
}
}
.scroll_list {
height: $category_wrap_height;
// width: 100%;
}
.scroll_list_right {
height: calc($category_wrap_height - 60rpx);
}
.pirce {
color: #666666;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.priceRed {
color: #F33A3A;
}
.priceGreen {
color: #50CC58;
}
.font16 {
font-size: 32rpx;
}
}
.ZPaging_bottom {
height: $zpaging_bottom;
}
.ZPaging_top {
height: $zpaging_top;
}
.modalBox{
display: flex;
flex-direction: column;
align-items: center;
.modal_top{
}
.modal_bottom{
height: 500rpx;
}
}
.productNameText{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.scroll-Y{
width: auto;
}
</style>
本文链接：https://blog.smallhao.fun/?id=25 转载需授权！
Chen’Blog版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！