|
|
@@ -1,442 +1,462 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
- <uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="巡点检工单" @clickLeft="back"></uni-nav-bar>
|
|
|
-
|
|
|
- <view class="search-box">
|
|
|
- <uni-section>
|
|
|
- <uni-easyinput @clear="clearSearch" prefixIcon="search" style="width: 460rpx" v-model="code"
|
|
|
- placeholder="工单编号">
|
|
|
- </uni-easyinput>
|
|
|
- </uni-section>
|
|
|
- <button class="search_btn" @click="doSearch">搜索</button>
|
|
|
- <image class="menu_icon" @click="showSearch" src="~@/static/pda/menu.svg"></image>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
- <view v-show="showTab">
|
|
|
- <view class="top-wrapper">
|
|
|
- <view class="tab_box rx-sc">
|
|
|
- <view class="tab_item" v-for="(item,index) in tabList" :key="index"
|
|
|
- :class="{active: pickTabIndex == index}">
|
|
|
- <view @click="changeChartsTab(index)" class="badge-c">
|
|
|
- {{item.label}}
|
|
|
- <u-badge max="99" :value="item.number" absolute></u-badge>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <OrderTask v-for="(item, index) in tabList" :key="index" v-show="index === pickTabIndex" :list="item.list"
|
|
|
- :type="tabList.value" :groupId="groupId" @changeGroup="onChangeGroup"></OrderTask>
|
|
|
-
|
|
|
- <u-toast ref="uToast"></u-toast>
|
|
|
-
|
|
|
- <MySearch :show.sync="searchShow" :formItems="formItems" @search="confirmSearch" ref="mySearchRef"></MySearch>
|
|
|
- </view>
|
|
|
+ <view>
|
|
|
+ <uni-nav-bar
|
|
|
+ fixed="true"
|
|
|
+ statusBar="true"
|
|
|
+ left-icon="back"
|
|
|
+ title="巡点检工单"
|
|
|
+ @clickLeft="back"
|
|
|
+ ></uni-nav-bar>
|
|
|
+
|
|
|
+ <view class="search-box">
|
|
|
+ <uni-section>
|
|
|
+ <uni-easyinput
|
|
|
+ @clear="clearSearch"
|
|
|
+ prefixIcon="search"
|
|
|
+ style="width: 460rpx"
|
|
|
+ v-model="code"
|
|
|
+ placeholder="工单编号"
|
|
|
+ >
|
|
|
+ </uni-easyinput>
|
|
|
+ </uni-section>
|
|
|
+ <button class="search_btn" @click="doSearch">搜索</button>
|
|
|
+ <image
|
|
|
+ class="menu_icon"
|
|
|
+ @click="showSearch"
|
|
|
+ src="~@/static/pda/menu.svg"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-show="showTab">
|
|
|
+ <view class="top-wrapper">
|
|
|
+ <view class="tab_box rx-sc">
|
|
|
+ <view
|
|
|
+ class="tab_item"
|
|
|
+ v-for="(item, index) in tabList"
|
|
|
+ :key="index"
|
|
|
+ :class="{ active: pickTabIndex == index }"
|
|
|
+ >
|
|
|
+ <view @click="changeChartsTab(index)" class="badge-c">
|
|
|
+ {{ item.label }}
|
|
|
+ <u-badge max="99" :value="item.number" absolute></u-badge>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <OrderTask
|
|
|
+ v-for="(item, index) in tabList"
|
|
|
+ :key="index"
|
|
|
+ v-show="index === pickTabIndex"
|
|
|
+ :list="item.list"
|
|
|
+ :type="tabList.value"
|
|
|
+ :groupId="groupId"
|
|
|
+ @changeGroup="onChangeGroup"
|
|
|
+ ></OrderTask>
|
|
|
+
|
|
|
+ <u-toast ref="uToast"></u-toast>
|
|
|
+
|
|
|
+ <MySearch
|
|
|
+ :show.sync="searchShow"
|
|
|
+ :formItems="formItems"
|
|
|
+ @search="confirmSearch"
|
|
|
+ ref="mySearchRef"
|
|
|
+ ></MySearch>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import {
|
|
|
- isObjectEmpty
|
|
|
- } from '@/utils/utils.js'
|
|
|
- import {
|
|
|
- getWorkOrderList,
|
|
|
- getRuleList,
|
|
|
- workPage
|
|
|
- } from '@/api/myTicket'
|
|
|
- import OrderTask from './OrderTask.vue'
|
|
|
- import {
|
|
|
- post,
|
|
|
- postJ
|
|
|
- } from '@/utils/api.js'
|
|
|
-
|
|
|
- export default {
|
|
|
- components: {
|
|
|
- OrderTask
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- showTab: true,
|
|
|
- page: 1,
|
|
|
- size: 10,
|
|
|
- isEnd: false,
|
|
|
- tabList: [{
|
|
|
- value: 0,
|
|
|
- label: '待接收',
|
|
|
- list: [],
|
|
|
- number: 0
|
|
|
- },
|
|
|
- {
|
|
|
- value: 2,
|
|
|
- label: '执行中',
|
|
|
- list: [],
|
|
|
- number: 0
|
|
|
- },
|
|
|
- {
|
|
|
- value: 3,
|
|
|
- label: '已完成',
|
|
|
- list: [],
|
|
|
- number: 0
|
|
|
- },
|
|
|
- {
|
|
|
- value: 4,
|
|
|
- label: '全部',
|
|
|
- list: [],
|
|
|
- isNone: !this.$isAuthorities('eam:tour_tally:listAll'),
|
|
|
- number: 0
|
|
|
- }
|
|
|
- ],
|
|
|
- pickTabIndex: 0,
|
|
|
- qrContent: null,
|
|
|
- barType: 0,
|
|
|
- searchShow: false,
|
|
|
- code: '',
|
|
|
- groupId: null,
|
|
|
- searchForm: {},
|
|
|
- formItems: [{
|
|
|
- label: '规则名称:',
|
|
|
- prop: 'ruleId',
|
|
|
- component: 'MySelect',
|
|
|
- props: {
|
|
|
- localdata: [],
|
|
|
- dataKey: 'name',
|
|
|
- dataValue: 'id'
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- label: '时间:',
|
|
|
- prop: 'startEndTime',
|
|
|
- component: 'MyDateRange',
|
|
|
- props: {
|
|
|
- type: 'daterange',
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
- this.getRuleList()
|
|
|
- },
|
|
|
- onShow() {
|
|
|
- this.getFirstList()
|
|
|
- this.getStatus()
|
|
|
- },
|
|
|
- onReachBottom() {
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getStatus() {
|
|
|
- getWorkOrderList({
|
|
|
- orderStatus: [0],
|
|
|
- type: 1,
|
|
|
- pageNum: 1,
|
|
|
- size: 1
|
|
|
- }).then(res => {
|
|
|
- console.log(res, 'res ===')
|
|
|
- this.tabList[0].number = res.count
|
|
|
- })
|
|
|
- getWorkOrderList({
|
|
|
- orderStatus: [2],
|
|
|
- type: 1,
|
|
|
- pageNum: 1,
|
|
|
- size: 1
|
|
|
- }).then(res => {
|
|
|
- this.tabList[1].number = res.count
|
|
|
- })
|
|
|
-
|
|
|
- },
|
|
|
- getCount() {
|
|
|
- statistics().then(data => {
|
|
|
- console.log('onsole.log(data)-----------')
|
|
|
- console.log(data)
|
|
|
- this.tabList = this.tabList.map(item => {
|
|
|
- switch (item.value) {
|
|
|
- case '0':
|
|
|
- return {
|
|
|
- ...item, badge: {
|
|
|
- value: data.maintenanceNum
|
|
|
- }
|
|
|
- }
|
|
|
- case '2':
|
|
|
- return {
|
|
|
- ...item, badge: {
|
|
|
- value: data.patrolInspection
|
|
|
- }
|
|
|
- }
|
|
|
- case '3':
|
|
|
- return {
|
|
|
- ...item, badge: {
|
|
|
- value: data.quantityNum
|
|
|
- }
|
|
|
- }
|
|
|
- case '4':
|
|
|
- return {
|
|
|
- ...item, badge: {
|
|
|
- value: data.repairsNum
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- getFirstList: function() {
|
|
|
- this.page = 1
|
|
|
- this.isEnd = false
|
|
|
- this.getList()
|
|
|
- },
|
|
|
- getList() {
|
|
|
- if (this.isEnd) {
|
|
|
- this.$refs.uToast.show({
|
|
|
- message: "暂无更多数据",
|
|
|
- duration: 1000
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- })
|
|
|
-
|
|
|
- let params = {
|
|
|
- orderStatus: [this.tabList[this.pickTabIndex].value],
|
|
|
- type: 1,
|
|
|
- pageNum: this.page,
|
|
|
- size: this.size,
|
|
|
- ...this.searchForm
|
|
|
- }
|
|
|
-
|
|
|
- if (this.groupId) {
|
|
|
- params.executeGroupId = this.groupId
|
|
|
- }
|
|
|
-
|
|
|
- console.log(this.showTab);
|
|
|
-
|
|
|
- if (!this.showTab || this.pickTabIndex == 3) {
|
|
|
- delete params.orderStatus
|
|
|
- }
|
|
|
- let api = this.pickTabIndex == 3 ? workPage : getWorkOrderList
|
|
|
-
|
|
|
- // return
|
|
|
- api(params)
|
|
|
- .then(res => {
|
|
|
- // this.tabList[this.pickTabIndex].list = res.list
|
|
|
- // isEnd = this.tabList[this.pickTabIndex].list >= res.count
|
|
|
- if (this.page == 1) {
|
|
|
- this.tabList[this.pickTabIndex].list = res.list;
|
|
|
- } else {
|
|
|
- this.tabList[this.pickTabIndex].list.push(...res.list);
|
|
|
- }
|
|
|
- this.page += 1
|
|
|
- this.isEnd = this.tabList[this.pickTabIndex].list.length >= res.count;
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
- })
|
|
|
- },
|
|
|
- changeChartsTab(index) {
|
|
|
- this.pickTabIndex = index;
|
|
|
- this.groupId = null;
|
|
|
- this.getFirstList();
|
|
|
- },
|
|
|
- onChangeGroup(groupId) {
|
|
|
- this.groupId = groupId;
|
|
|
- this.getFirstList();
|
|
|
- },
|
|
|
-
|
|
|
- async getRuleList() {
|
|
|
- let params = {
|
|
|
- status: 1,
|
|
|
- type: 1,
|
|
|
- pageNum: 1,
|
|
|
- size: -1
|
|
|
- }
|
|
|
- const res = await getRuleList(params)
|
|
|
- this.formItems.find(item => item.prop === 'ruleId').props.localdata = res
|
|
|
- },
|
|
|
- clearSearch() {
|
|
|
- this.code = ''
|
|
|
- this.doSearch()
|
|
|
- },
|
|
|
- doSearch() {
|
|
|
- this.isEnd = false;
|
|
|
- this.page = 1;
|
|
|
- this.searchForm.code = this.code
|
|
|
- this.showTab = isObjectEmpty(this.searchForm)
|
|
|
- this.getList();
|
|
|
- },
|
|
|
- showSearch() {
|
|
|
- this.searchShow = true
|
|
|
- },
|
|
|
- confirmSearch(e) {
|
|
|
- console.log(e);
|
|
|
- let data = JSON.parse(JSON.stringify(e))
|
|
|
- if (data.startEndTime) {
|
|
|
- var [startTime, endTime] = data.startEndTime
|
|
|
- delete data.startEndTime
|
|
|
- this.searchForm = {
|
|
|
- ...data,
|
|
|
- startTime,
|
|
|
- endTime
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.searchForm = {
|
|
|
- ...data
|
|
|
- }
|
|
|
- }
|
|
|
- console.log(this.searchForm);
|
|
|
- this.doSearch()
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
+import { isObjectEmpty } from "@/utils/utils.js";
|
|
|
+import { getWorkOrderList, getRuleList, workPage } from "@/api/myTicket";
|
|
|
+import OrderTask from "./OrderTask.vue";
|
|
|
+import { post, postJ } from "@/utils/api.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ OrderTask,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showTab: true,
|
|
|
+ page: 1,
|
|
|
+ size: 10,
|
|
|
+ isEnd: false,
|
|
|
+ tabList: [
|
|
|
+ {
|
|
|
+ value: 0,
|
|
|
+ label: "待接收",
|
|
|
+ list: [],
|
|
|
+ number: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ label: "执行中",
|
|
|
+ list: [],
|
|
|
+ number: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 3,
|
|
|
+ label: "已完成",
|
|
|
+ list: [],
|
|
|
+ number: 0,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 4,
|
|
|
+ label: "全部",
|
|
|
+ list: [],
|
|
|
+ isNone: !this.$isAuthorities("eam:tour_tally:listAll"),
|
|
|
+ number: 0,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pickTabIndex: 0,
|
|
|
+ qrContent: null,
|
|
|
+ barType: 0,
|
|
|
+ searchShow: false,
|
|
|
+ code: "",
|
|
|
+ groupId: null,
|
|
|
+ searchForm: {},
|
|
|
+ formItems: [
|
|
|
+ {
|
|
|
+ label: "规则名称:",
|
|
|
+ prop: "ruleId",
|
|
|
+ component: "MySelect",
|
|
|
+ props: {
|
|
|
+ localdata: [],
|
|
|
+ dataKey: "name",
|
|
|
+ dataValue: "id",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "时间:",
|
|
|
+ prop: "startEndTime",
|
|
|
+ component: "MyDateRange",
|
|
|
+ props: {
|
|
|
+ type: "daterange",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.getRuleList();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getFirstList();
|
|
|
+ this.getStatus();
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getStatus() {
|
|
|
+ getWorkOrderList({
|
|
|
+ orderStatus: [0],
|
|
|
+ type: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ size: 1,
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res, "res ===");
|
|
|
+ this.tabList[0].number = res.count;
|
|
|
+ });
|
|
|
+ getWorkOrderList({
|
|
|
+ orderStatus: [2],
|
|
|
+ type: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ size: 1,
|
|
|
+ }).then((res) => {
|
|
|
+ this.tabList[1].number = res.count;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCount() {
|
|
|
+ statistics().then((data) => {
|
|
|
+ console.log("onsole.log(data)-----------");
|
|
|
+ console.log(data);
|
|
|
+ this.tabList = this.tabList.map((item) => {
|
|
|
+ switch (item.value) {
|
|
|
+ case "0":
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ badge: {
|
|
|
+ value: data.maintenanceNum,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ case "2":
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ badge: {
|
|
|
+ value: data.patrolInspection,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ case "3":
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ badge: {
|
|
|
+ value: data.quantityNum,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ case "4":
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ badge: {
|
|
|
+ value: data.repairsNum,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getFirstList: function () {
|
|
|
+ this.page = 1;
|
|
|
+ this.isEnd = false;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ getList() {
|
|
|
+ if (this.isEnd) {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ message: "暂无更多数据",
|
|
|
+ duration: 1000,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ uni.showLoading({
|
|
|
+ title: "加载中",
|
|
|
+ });
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ orderStatus: [this.tabList[this.pickTabIndex].value],
|
|
|
+ type: 1,
|
|
|
+ pageNum: this.page,
|
|
|
+ size: this.size,
|
|
|
+ ...this.searchForm,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.groupId) {
|
|
|
+ params.teamId = this.groupId;
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(this.showTab);
|
|
|
+
|
|
|
+ if (!this.showTab || this.pickTabIndex == 3) {
|
|
|
+ delete params.orderStatus;
|
|
|
+ }
|
|
|
+ let api = this.pickTabIndex == 3 ? workPage : getWorkOrderList;
|
|
|
+
|
|
|
+ // return
|
|
|
+ api(params)
|
|
|
+ .then((res) => {
|
|
|
+ // this.tabList[this.pickTabIndex].list = res.list
|
|
|
+ // isEnd = this.tabList[this.pickTabIndex].list >= res.count
|
|
|
+ if (this.page == 1) {
|
|
|
+ this.tabList[this.pickTabIndex].list = res.list;
|
|
|
+ } else {
|
|
|
+ this.tabList[this.pickTabIndex].list.push(...res.list);
|
|
|
+ }
|
|
|
+ this.page += 1;
|
|
|
+ this.isEnd = this.tabList[this.pickTabIndex].list.length >= res.count;
|
|
|
+ uni.hideLoading();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ uni.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ changeChartsTab(index) {
|
|
|
+ this.pickTabIndex = index;
|
|
|
+ this.groupId = null;
|
|
|
+ this.getFirstList();
|
|
|
+ },
|
|
|
+ onChangeGroup(groupId) {
|
|
|
+ this.groupId = groupId;
|
|
|
+ this.getFirstList();
|
|
|
+ },
|
|
|
+
|
|
|
+ async getRuleList() {
|
|
|
+ let params = {
|
|
|
+ status: 1,
|
|
|
+ type: 1,
|
|
|
+ pageNum: 1,
|
|
|
+ size: -1,
|
|
|
+ };
|
|
|
+ const res = await getRuleList(params);
|
|
|
+ this.formItems.find((item) => item.prop === "ruleId").props.localdata =
|
|
|
+ res;
|
|
|
+ },
|
|
|
+ clearSearch() {
|
|
|
+ this.code = "";
|
|
|
+ this.doSearch();
|
|
|
+ },
|
|
|
+ doSearch() {
|
|
|
+ this.isEnd = false;
|
|
|
+ this.page = 1;
|
|
|
+ this.searchForm.code = this.code;
|
|
|
+ this.showTab = isObjectEmpty(this.searchForm);
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ showSearch() {
|
|
|
+ this.searchShow = true;
|
|
|
+ },
|
|
|
+ confirmSearch(e) {
|
|
|
+ console.log(e);
|
|
|
+ let data = JSON.parse(JSON.stringify(e));
|
|
|
+ if (data.startEndTime) {
|
|
|
+ var [startTime, endTime] = data.startEndTime;
|
|
|
+ delete data.startEndTime;
|
|
|
+ this.searchForm = {
|
|
|
+ ...data,
|
|
|
+ startTime,
|
|
|
+ endTime,
|
|
|
+ };
|
|
|
+ } else {
|
|
|
+ this.searchForm = {
|
|
|
+ ...data,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ console.log(this.searchForm);
|
|
|
+ this.doSearch();
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .top-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background-color: #fff;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .tab_box {
|
|
|
- width: 100%;
|
|
|
- height: 68rpx;
|
|
|
-
|
|
|
-
|
|
|
- .tab_item {
|
|
|
- height: 68rpx;
|
|
|
- line-height: 68rpx;
|
|
|
- padding: 0 20rpx;
|
|
|
- font-size: 32rpx;
|
|
|
- // color: #979C9E;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .active {
|
|
|
- box-sizing: border-box;
|
|
|
- border-bottom: 6rpx solid $theme-color;
|
|
|
- color: $theme-color;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .tab-title {
|
|
|
- position: fixed;
|
|
|
- z-index: 99;
|
|
|
- width: 100%;
|
|
|
- padding: 10rpx;
|
|
|
- // display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- height: $tab-height;
|
|
|
- line-height: $tab-height;
|
|
|
- background-color: #ffffff;
|
|
|
- border-bottom: 1px solid #f2f2f2;
|
|
|
- // box-sizing: border-box;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: auto hidden;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- &::-webkit-scrollbar {
|
|
|
- /*滚动条整体样式*/
|
|
|
- width: 10px;
|
|
|
- /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
- height: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-thumb {
|
|
|
- /*滚动条里面小方块*/
|
|
|
- border-radius: 10px;
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- background: #535353;
|
|
|
- }
|
|
|
-
|
|
|
- &::-webkit-scrollbar-track {
|
|
|
- /*滚动条里面轨道*/
|
|
|
- -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- background: #ededed;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-item {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- display: inline-block;
|
|
|
- font-size: 32rpx;
|
|
|
- color: $uni-text-color-grey;
|
|
|
- }
|
|
|
-
|
|
|
- .tab-item.active {
|
|
|
- color: $j-primary-border-green;
|
|
|
- border-bottom: 1px solid $j-primary-border-green;
|
|
|
- }
|
|
|
-
|
|
|
- .title-num {
|
|
|
- font-size: 26rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .title-red {
|
|
|
- display: inline-block;
|
|
|
- font-size: 22rpx;
|
|
|
- padding: 0 10rpx;
|
|
|
- border-radius: 50rpx;
|
|
|
- color: #ffffff;
|
|
|
- background: red;
|
|
|
- line-height: 38rpx;
|
|
|
- position: absolute;
|
|
|
- top: 10rpx;
|
|
|
- min-width: 18rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .badge-c {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.u-badge {
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- transform: translate(90%, 20%);
|
|
|
- }
|
|
|
-
|
|
|
- .search-box {
|
|
|
- background-color: #fff;
|
|
|
- display: flex;
|
|
|
- width: 750rpx;
|
|
|
- height: 88rpx;
|
|
|
- padding: 16rpx 32rpx;
|
|
|
- align-items: center;
|
|
|
- gap: 16rpx;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- /deep/.uni-section {
|
|
|
- margin-top: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- /deep/.uni-section-header {
|
|
|
- padding: 0px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .search_btn {
|
|
|
- width: 120rpx;
|
|
|
- height: 70rpx;
|
|
|
- line-height: 70rpx;
|
|
|
- padding: 0 24rpx;
|
|
|
- background: $theme-color;
|
|
|
- font-size: 32rpx;
|
|
|
- color: #fff;
|
|
|
- margin: 0;
|
|
|
- margin-left: 26rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .menu_icon {
|
|
|
- width: 44rpx;
|
|
|
- height: 44rpx;
|
|
|
- margin-left: 14rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
|
|
+.top-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tab_box {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+
|
|
|
+ .tab_item {
|
|
|
+ height: 68rpx;
|
|
|
+ line-height: 68rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ // color: #979C9E;
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 6rpx solid $theme-color;
|
|
|
+ color: $theme-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tab-title {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10rpx;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ height: $tab-height;
|
|
|
+ line-height: $tab-height;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-bottom: 1px solid #f2f2f2;
|
|
|
+ // box-sizing: border-box;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: auto hidden;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 10px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #535353;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: $uni-text-color-grey;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tab-item.active {
|
|
|
+ color: $j-primary-border-green;
|
|
|
+ border-bottom: 1px solid $j-primary-border-green;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-num {
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-red {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 22rpx;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ background: red;
|
|
|
+ line-height: 38rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 10rpx;
|
|
|
+ min-width: 18rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.badge-c {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.u-badge {
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ transform: translate(90%, 20%);
|
|
|
+}
|
|
|
+
|
|
|
+.search-box {
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ align-items: center;
|
|
|
+ gap: 16rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ /deep/.uni-section {
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.uni-section-header {
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search_btn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ background: $theme-color;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0;
|
|
|
+ margin-left: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu_icon {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ margin-left: 14rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|