| | |
| | | <template> |
| | | <div class="main_app"> |
| | | <div class="mb20"> |
| | | <el-select v-model="platformId" @change="getList()"> |
| | | <el-option v-for="item in PlatformList" :key="item.id" :value="item.id" :label="item.name" /> |
| | | </el-select> |
| | | <div class="mb20 main_header"> |
| | | <div class="platgroup_tabs"> |
| | | <div |
| | | class="tab" |
| | | :class="{ active: activeGroup.id === item.id }" |
| | | @click="platgroupClick(item)" |
| | | v-for="(item, i) in PlatGroupList" |
| | | :key="i" |
| | | > |
| | | {{ item.name }} |
| | | </div> |
| | | <!-- <el-tabs v-model="activeGroup.id" @tab-click="platgroupClick"> |
| | | <el-tab-pane |
| | | v-for="item,i in PlatGroupList" |
| | | :key="i" |
| | | :label="item.name" |
| | | :name="String(item.id)" |
| | | /> |
| | | </el-tabs> --> |
| | | </div> |
| | | <el-button type="primary" class="ml20" @click="handleSet" |
| | | >é
ç½®æå°</el-button |
| | | > |
| | | </div> |
| | | <!-- --> |
| | | <div class="platform_list"> |
| | | <div class="item" v-for="i in 2"> |
| | | <div v-if="activeGroup.platformList" class="platform_list"> |
| | | <div class="item" :class="{ emyty: item.workStatus == 0 }" v-for="(item, i) in activeGroup.platformList" :key="i"> |
| | | <div class="head"> |
| | | <div class="left"> |
| | | <div class="status mr10">ä½ä¸ä¸</div> |
| | | <div class="name">6å·æå°</div> |
| | | <div class="status mr10"> |
| | | {{ item.workStatus == "0" ? "空é²" : "ä½ä¸ä¸" }} |
| | | </div> |
| | | <div class="name">{{ item.name }}</div> |
| | | <div class="ite"> |
| | | <span class="placeholder9">ä½ä¸ï¼</span><span>1</span> |
| | | <span class="placeholder9">ä½ä¸ï¼</span |
| | | ><span>{{ item.platformWorkVO.workNum }}</span> |
| | | </div> |
| | | <div class="ite"> |
| | | <span class="placeholder9">ä½ä¸ï¼</span><span>1</span> |
| | | <span class="placeholder9">å·²å«ï¼</span |
| | | ><span>{{ item.platformWorkVO.callNum }}</span> |
| | | </div> |
| | | <div class="ite"> |
| | | <span class="placeholder9">ä½ä¸ï¼</span><span class="red">1</span> |
| | | <span class="placeholder9">çå¾
ï¼</span |
| | | ><span>{{ item.platformWorkVO.waitNum }}</span> |
| | | </div> |
| | | <div class="ite"> |
| | | <span class="placeholder9">å¼å¸¸ï¼</span |
| | | ><span class="red">{{ item.platformWorkVO.exceptionNum }}</span> |
| | | </div> |
| | | </div> |
| | | <el-button type="primary" @click="handleQueuing()">å«å·</el-button> |
| | | <el-button type="primary" @click="handleQueuing(item)"> |
| | | <div class="df_ac"> |
| | | <img class="shengyin" src="@/assets/icons/shengyin.png" alt=""> |
| | | <span>å«å·</span> |
| | | </div> |
| | | </el-button> |
| | | </div> |
| | | <div class="list"> |
| | | <div class="info" v-for="j in 3"> |
| | | <div |
| | | class="list" |
| | | v-if="item.platformWorkVO && item.platformWorkVO.platformJobList" |
| | | > |
| | | <div |
| | | class="info" |
| | | v-for="task in item.platformWorkVO.platformJobList" |
| | | :key="task.id" |
| | | > |
| | | <div class="line"> |
| | | <div class="left"> |
| | | <span class="plate">çA12122</span> |
| | | <div v-if="task.carCodeFront" class="code"> |
| | | <span>{{ task.carCodeFront.slice(0, 1) }}</span> |
| | | <span>{{ task.carCodeFront.slice(1, 2) }}</span> |
| | | <span>·</span> |
| | | <span>{{ task.carCodeFront.slice(2) }}</span> |
| | | </div> |
| | | </div> |
| | | <div class="right"> |
| | | <span class="green">ä½ä¸ä¸</span> |
| | | <span class="green ml20">23åé26ç§</span> |
| | | <div |
| | | class="status" |
| | | v-if="task.status != 4 && task.status != 5" |
| | | :class="{ red: task.status == 8 }" |
| | | > |
| | | <span class="lab">{{ statusMap[task.status] }}</span> |
| | | </div> |
| | | <div class="status" v-if="task.status == 4"> |
| | | <span class="lab">å«å·ä¸</span> {{ task.callDateTemp }} |
| | | </div> |
| | | <div class="status scs" v-if="task.status == 5"> |
| | | <span class="lab">å·²ä½ä¸</span> {{ task.startDateTemp }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="line"> |
| | | <div class="ite"> |
| | | <div v-if="task.type == 4" class="ite"> |
| | | <span>åååå·ï¼</span> |
| | | <span>{{ task.contractNum }}</span> |
| | | </div> |
| | | <div v-else class="ite"> |
| | | <span>è¿è¾åå·ï¼</span> |
| | | <span>202020</span> |
| | | <span>{{ task.code }}</span> |
| | | </div> |
| | | <div class="ite"> |
| | | <span>驾驶åï¼</span> |
| | | <span>202020</span> |
| | | <span>{{ task.driverName }}</span> |
| | | </div> |
| | | <div class="ite"> |
| | | <span>ææºå·ï¼</span> |
| | | <span>202020</span> |
| | | <span>{{ task.drivierPhone }}</span> |
| | | </div> |
| | | <div class="ite"> |
| | | <span>æ»è¿è¾éï¼</span> |
| | | <span>202020</span> |
| | | <span>{{ task.totalNum }}䏿¯</span> |
| | | </div> |
| | | <div class="ite" style="width: 66.6%"> |
| | | <div v-if="task.type != 4" class="ite" style="width: 66.6%"> |
| | | <span>è¿è¾å
¬å¸ï¼</span> |
| | | <span>20202dasdç©å¿ç©å¿ç©å¿é¢å¤ é¢å¤0</span> |
| | | <span>{{ task.carrierName }}</span> |
| | | </div> |
| | | <div class="ite"></div> |
| | | </div> |
| | | <div class="line"> |
| | | <div class="left"> |
| | | <div v-if="task.type != 4" class="left"> |
| | | <span class="primaryColor pointer" @click="handleDetail" |
| | | >è¿å详æ
</span |
| | | > |
| | | </div> |
| | | <div v-else></div> |
| | | <div class="right"> |
| | | <el-button type="primary" @click="handleFinish()" |
| | | <el-button |
| | | v-if="task.status == 5" |
| | | plain |
| | | @click="handleErr(task)" |
| | | >å¼å¸¸æèµ·</el-button |
| | | > |
| | | <el-button |
| | | v-if="task.status == 5 || task.status == 8" |
| | | plain |
| | | @click="handleTransform(item, task)" |
| | | >转移æå°</el-button |
| | | > |
| | | <el-button |
| | | v-if="task.status == 4" |
| | | plain |
| | | @click="handlePass(task)" |
| | | >è¿å·</el-button |
| | | > |
| | | <el-button |
| | | v-if="task.status == 5 || task.status == 8" |
| | | type="primary" |
| | | @click="handleFinish(task)" |
| | | >ä½ä¸å®æ</el-button |
| | | > |
| | | <el-button plain>转移æå°</el-button> |
| | | <el-button plain>å¼å¸¸æèµ·</el-button> |
| | | <el-button |
| | | v-if="task.status == 4" |
| | | type="primary" |
| | | @click="handleWork(task)" |
| | | >å¼å§ä½ä¸</el-button |
| | | > |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div v-if="!item.platformWorkVO.platformJobList || item.platformWorkVO.platformJobList.length == 0" class="empty_plat"> |
| | | <img src="@/assets/images/default_nodata.png" alt=""> |
| | | <div>ææ è½¦è¾</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <!-- é
ç½®æ¾ç¤ºæå° --> |
| | | <el-dialog |
| | | <GlobalWindow |
| | | title="é
ç½®æ¾ç¤ºæå°" |
| | | :visible.sync="isShowSet" |
| | | center |
| | | width="420px" |
| | | :confirm-working="setLoading" |
| | | @confirm="handleSetSub" |
| | | width="560px" |
| | | > |
| | | <div class="set_modal"> |
| | | <div class="mb20"> |
| | | <div class="title">å
¥åºæå°ç»</div> |
| | | <div class="mb10" v-for="group in PlatGroupList" :key="group.id"> |
| | | <div class="title">{{group.name}}</div> |
| | | <div class="list"> |
| | | <div class="item active">1å·æå°</div> |
| | | <div class="item">2å·æå°</div> |
| | | <div class="item">1å·æå°</div> |
| | | <div class="item">2å·æå°</div> |
| | | </div> |
| | | </div> |
| | | <div> |
| | | <div class="title">å
¥åºæå°ç»</div> |
| | | <div class="list"> |
| | | <div class="item">1å·æå°</div> |
| | | <div class="item">2å·æå°</div> |
| | | <div class="item">1å·æå°</div> |
| | | <div class="item">2å·æå°</div> |
| | | <div class="item" @click="platformSetClick(item.id)" :class="{ active: item.showConfig }" v-for="item in group.platformList" :key="item.id"> |
| | | <div>{{item.name}}</div> |
| | | <div v-if="item.showConfig" class="bg"></div> |
| | | <i v-if="item.showConfig" class="el-icon-check scs"></i> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="setReset">éç½®</el-button> |
| | | <el-button type="primary" @click="setSub">ç¡®å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </GlobalWindow> |
| | | <!-- è¿å详æ
--> |
| | | <!-- --> |
| | | <!-- å«å· --> |
| | | <PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getList" @close="isShowQueuing = false" /> |
| | | <WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" /> |
| | | <PlatformQueuing |
| | | ref="PlatformQueuingRef" |
| | | v-if="isShowQueuing" |
| | | @success="getPlatGroupList" |
| | | @close="isShowQueuing = false" |
| | | /> |
| | | <WaybillDetail |
| | | ref="WaybillDetailRef" |
| | | v-if="isShowDetail" |
| | | @success="getList" |
| | | @close="isShowDetail = false" |
| | | /> |
| | | <el-dialog |
| | | title="转移æå°" |
| | | :visible.sync="isShowTransform" |
| | | width="500px" |
| | | style="margin-top: 12vh" |
| | | > |
| | | <div class="df_ac"> |
| | | <span>éæ©è½¬ç§»å°çæå°ï¼</span> |
| | | <el-select v-model="activePlatId"> |
| | | <el-option |
| | | v-for="item in activeGroup.platformList" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | > |
| | | </el-option> |
| | | </el-select> |
| | | </div> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="isShowTransform = false">åæ¶</el-button> |
| | | <el-button type="primary" @click="transformSub">ç¡®å®</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getPlatform, getPlatformJob } from '@/api' |
| | | import { |
| | | getPlatformGroupList, |
| | | platformBeginWork, |
| | | platformFinishWork, |
| | | platformOverNumber, |
| | | platformErr, |
| | | platformMove, |
| | | updUserPlatformConfig, |
| | | |
| | | listByGroupId |
| | | } from '@/api' |
| | | import PlatformQueuing from './components/PlatformQueuing.vue' |
| | | import WaybillDetail from './components/WaybillDetail.vue' |
| | | import GlobalWindow from '@/components/common/GlobalWindow' |
| | | import dayjs from 'dayjs' |
| | | import duration from 'dayjs/plugin/duration' |
| | | import { Message } from 'element-ui' |
| | | import { statusMap } from './config' |
| | | dayjs.extend(duration) |
| | | export default { |
| | | components: { |
| | | PlatformQueuing, |
| | | WaybillDetail |
| | | WaybillDetail, |
| | | GlobalWindow |
| | | }, |
| | | data () { |
| | | return { |
| | | platformId: '', |
| | | PlatformList: [], |
| | | dataList: [], |
| | | statusMap, |
| | | activeGroup: {}, |
| | | PlatGroupList: [], |
| | | platList: [], |
| | | platCallList: [], |
| | | isShowTransform: false, |
| | | activePlatId: '', // 转移æå° |
| | | activetaskId: '', |
| | | |
| | | isShowSet: false, // æå°é
ç½® |
| | | setLoading: false, |
| | | |
| | | setParam: {}, |
| | | isShowDetail: false, // è¿å详æ
|
| | | detail: {}, |
| | | isShowQueuing: false |
| | | isShowQueuing: false, |
| | | timer: null |
| | | } |
| | | }, |
| | | created () { |
| | | this.getPlatList() |
| | | this.getList() |
| | | this.getPlatGroupList() |
| | | // this.getList() |
| | | }, |
| | | methods: { |
| | | handleQueuing (row) { |
| | | handleWork (item) { |
| | | platformBeginWork({ jobId: item.id }).then(res => { |
| | | Message.success('å·²å¼å§ä½ä¸') |
| | | this.getPlatGroupList() |
| | | }) |
| | | }, |
| | | handleFinish (item) { |
| | | platformFinishWork({ jobId: item.id }).then(res => { |
| | | Message.success('宿ä½ä¸') |
| | | this.getPlatGroupList() |
| | | }) |
| | | }, |
| | | handleTransform (item, task) { |
| | | this.activePlatId = item.id |
| | | this.activetaskId = task.id |
| | | this.isShowTransform = true |
| | | }, |
| | | transformSub () { |
| | | const { activePlatId, activetaskId } = this |
| | | platformMove({ platformId: activePlatId, jobId: activetaskId }).then(res => { |
| | | Message.success('转移æå°æå') |
| | | this.isShowTransform = false |
| | | this.getPlatGroupList() |
| | | }) |
| | | }, |
| | | handlePass (item) { |
| | | this.$confirm('æ¨ç¡®è®¤è¦å¯¹è¯¥ä»»å¡è¿è¡è¿å·å', '温馨æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | platformOverNumber({ jobId: item.id }).then(ress => { |
| | | Message.success('è¿å·æå') |
| | | this.getPlatGroupList() |
| | | }) |
| | | }) |
| | | }, |
| | | handleErr (item) { |
| | | this.$confirm('æ¨ç¡®è®¤è¦å¯¹è¯¥ä»»å¡è¿è¡å¼å¸¸æèµ·å', '温馨æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }).then(() => { |
| | | platformErr({ jobId: item.id }).then(ress => { |
| | | Message.success('å¼å¸¸æèµ·æå') |
| | | this.getPlatGroupList() |
| | | }) |
| | | }) |
| | | }, |
| | | platgroupClick (item) { |
| | | this.activeGroup = { ...item } |
| | | this.circulInitTaskList() |
| | | this.timer = setInterval(() => { |
| | | this.circulInitTaskList() |
| | | }, 1000) |
| | | }, |
| | | getPlatGroupList () { |
| | | getPlatformGroupList({ |
| | | queryData: 1, |
| | | queryType: 1 |
| | | }).then(res => { |
| | | this.PlatGroupList = res || [] |
| | | if (res.length > 0) { |
| | | if (this.activeGroup && this.activeGroup.id) { |
| | | this.activeGroup = res.find(item => item.id === this.activeGroup.id) |
| | | } else { |
| | | this.activeGroup = res[0] |
| | | } |
| | | this.circulInitTaskList() |
| | | this.timer = setInterval(() => { |
| | | this.circulInitTaskList() |
| | | }, 1000) |
| | | } |
| | | }) |
| | | }, |
| | | circulInitTaskList () { |
| | | if (this.activeGroup && this.activeGroup.platformList && this.activeGroup.platformList.length > 0) { |
| | | const time = new Date() |
| | | this.activeGroup.platformList.forEach(plat => { |
| | | if (plat.platformWorkVO.platformJobList && plat.platformWorkVO.platformJobList.length > 0) { |
| | | plat.platformWorkVO.platformJobList.forEach(item => { |
| | | if (item.callDate) { |
| | | const timeNum = time.getTime() - new Date(item.callDate).getTime() |
| | | if (timeNum > 3600000) { |
| | | item.callDateTemp = dayjs.duration(timeNum).format('Hå°æ¶måsç§') |
| | | } else { |
| | | item.callDateTemp = dayjs.duration(timeNum).format('måsç§') |
| | | } |
| | | } |
| | | if (item.startDate) { |
| | | const timeNum = time.getTime() - new Date(item.startDate).getTime() |
| | | if (timeNum > 3600000) { |
| | | item.startDateTemp = dayjs.duration(timeNum).format('Hå°æ¶måssç§') |
| | | } else { |
| | | item.startDateTemp = dayjs.duration(timeNum).format('måsç§') |
| | | } |
| | | } |
| | | }) |
| | | } |
| | | }) |
| | | this.$forceUpdate() |
| | | } |
| | | }, |
| | | handleQueuing (item) { |
| | | this.isShowQueuing = true |
| | | this.$nextTick(() => { |
| | | this.$refs.PlatformQueuingRef.isShowModal = true |
| | | this.$refs.PlatformQueuingRef.activePlat = { ...item } |
| | | this.$refs.PlatformQueuingRef.getList() |
| | | }) |
| | | }, |
| | | handleDetail () { |
| | |
| | | }) |
| | | }, |
| | | getList () { |
| | | const { platformId } = this |
| | | getPlatformJob({ |
| | | model: { platformId } |
| | | }).then(res => { |
| | | this.dataList = res.records |
| | | }) |
| | | }, |
| | | handleFinish (item) { |
| | | this.$confirm('髿¶åº6å·æå° çA12345 ä½ä¸ç»æ', '温馨æç¤º', { |
| | | confirmButtonText: 'ç¡®å®', |
| | | cancelButtonText: 'åæ¶', |
| | | type: 'warning' |
| | | }) |
| | | }, |
| | | getPlatList () { |
| | | getPlatform({ |
| | | model: {} |
| | | }).then(res => { |
| | | this.PlatformList = res.records |
| | | const { groupId } = this |
| | | listByGroupId(groupId).then(res => { |
| | | this.platList = res |
| | | }) |
| | | }, |
| | | handleSet () { |
| | | this.isShowSet = true |
| | | }, |
| | | setReset () { }, |
| | | setSub () { } |
| | | handleSetSub () { |
| | | const { PlatGroupList } = this |
| | | const ids = [] |
| | | PlatGroupList.forEach(item => { |
| | | item.platformList.forEach(platform => { |
| | | if (platform.showConfig) { |
| | | ids.push(platform.id) |
| | | } |
| | | }) |
| | | }) |
| | | this.setLoading = true |
| | | updUserPlatformConfig(ids).then(res => { |
| | | this.setLoading = false |
| | | Message.success('æ´æ°æå') |
| | | this.isShowSet = false |
| | | this.getPlatGroupList() |
| | | }, () => { |
| | | this.setLoading = false |
| | | }) |
| | | }, |
| | | platformSetClick (id) { |
| | | const { PlatGroupList } = this |
| | | PlatGroupList.forEach(item => { |
| | | item.platformList.forEach(platform => { |
| | | if (platform.id === id) { |
| | | platform.showConfig = !platform.showConfig |
| | | } |
| | | }) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | <style lang="scss" scoped> |
| | | @import "@/assets/style/variables.scss"; |
| | | .platform_list { |
| | | width: 100%; |
| | | .item { |
| | | /* padding: 16px 24px; */ |
| | | background: #ffffff; |
| | | border-radius: 2px; |
| | | border: 1px solid #dfe2e8; |
| | | margin-bottom: 12px; |
| | | width: 100%; |
| | | .head { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | height: 50px; |
| | | background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%); |
| | | background: linear-gradient( 270deg, #FFFFFF 0%, #EBF6F7 100%); |
| | | border-radius: 2px 2px 0px 0px; |
| | | padding: 0 28px; |
| | | padding: 0 20px; |
| | | .shengyin{ |
| | | width: 12px; |
| | | height: 12px; |
| | | margin-right: 3px; |
| | | } |
| | | .left { |
| | | flex: 1; |
| | | display: flex; |
| | |
| | | .status { |
| | | line-height: 25px; |
| | | height: 25px; |
| | | padding: 0 4px; |
| | | background: #00ba67; |
| | | border-radius: 2px; |
| | | color: #ffffff; |
| | | padding: 0 6px; |
| | | } |
| | | .ite { |
| | | margin-right: 30px; |
| | |
| | | justify-content: space-between; |
| | | margin-top: 10px; |
| | | padding: 16px; |
| | | width: calc( 100% - 48px ); |
| | | .info { |
| | | background: #effbf5; |
| | | background: #f4fafb; |
| | | border-radius: 2px; |
| | | border: 1px solid #dfe2e8; |
| | | padding: 16px; |
| | | border-radius: 2px; |
| | | margin-bottom: 10px; |
| | | width: 30%; |
| | | width: calc( 31.6% - 16px ); |
| | | .status { |
| | | .lab { |
| | | font-weight: 500; |
| | | } |
| | | color: #00ba67; |
| | | } |
| | | .line { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | margin-bottom: 6px; |
| | | span { |
| | | &:nth-child(1) { |
| | | color: #999999; |
| | | } |
| | | } |
| | | .ite { |
| | | width: 33.3%; |
| | | margin-top: 8px; |
| | | } |
| | | .left { |
| | | .plate { |
| | | .code { |
| | | display: flex; |
| | | font-weight: 600; |
| | | height: 30px; |
| | | line-height: 30px; |
| | | font-size: 15px; |
| | | color: #111111; |
| | | padding: 4px 5px; |
| | | font-weight: 700; |
| | | border: 1px solid #279baa; |
| | | background-color: #fff; |
| | | border-radius: 4px; |
| | | border: 1px solid $primaryColor; |
| | | padding-right: 4px; |
| | | span { |
| | | &:nth-of-type(1) { |
| | | background: $primaryColor; |
| | | padding: 0 8px; |
| | | color: #fff; |
| | | } |
| | | &:nth-of-type(2) { |
| | | padding-left: 4px; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .right { |
| | |
| | | } |
| | | } |
| | | } |
| | | .jobing { |
| | | background: #effbf5; |
| | | .status { |
| | | color: #00ba67; |
| | | } |
| | | } |
| | | .err { |
| | | background: #fef6f6; |
| | | .status { |
| | | color: #ed4545; |
| | | } |
| | | } |
| | | } |
| | | .empty_plat{ |
| | | width: 100%; |
| | | height: 170px; |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | color: #B2B2B2; |
| | | img{ |
| | | width: 110px; |
| | | } |
| | | } |
| | | } |
| | | .emyty{ |
| | | .head{ |
| | | background: linear-gradient( 270deg, #FFFFFF 0%, #F7F7F7 100%) !important; |
| | | } |
| | | .status{ |
| | | background: #CCCCCC !important; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .main_head { |
| | | .main_header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | .tabs { |
| | | position: relative; |
| | | .platgroup_tabs { |
| | | flex: 1; |
| | | display: flex; |
| | | border-bottom: 1px solid #dfe2e8; |
| | | .tab { |
| | | color: #666666; |
| | | margin-right: 40px; |
| | | cursor: pointer; |
| | | padding-bottom: 18px; |
| | | border-bottom: 2px solid #fff; |
| | | } |
| | | .active { |
| | | font-weight: 500; |
| | | font-size: 15px; |
| | | color: #222222; |
| | | border-bottom: 2px solid $primary-color; |
| | | } |
| | | } |
| | | .ml20 { |
| | | position: absolute; |
| | | width: 120px; |
| | | height: 36px; |
| | | right: 0; |
| | | top: -4px; |
| | | } |
| | | } |
| | | /* */ |
| | |
| | | } |
| | | .list { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | .item { |
| | | cursor: pointer; |
| | | width: 30%; |
| | | height: 32px; |
| | | padding: 0 36px; |
| | | height: 36px; |
| | | border: 1px solid #dfe2e8; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | border-radius: 2px; |
| | | margin-bottom: 12px; |
| | | margin-bottom: 10px; |
| | | margin-right: 13px; |
| | | position: relative; |
| | | overflow: hidden; |
| | | .bg{ |
| | | position: absolute; |
| | | right: -12px; |
| | | bottom: -12px; |
| | | width: 24px; |
| | | height: 24px; |
| | | background: $primaryColor; |
| | | transform: rotate(45deg); |
| | | } |
| | | .scs{ |
| | | position: absolute; |
| | | right: -1px; |
| | | bottom: -1px; |
| | | color: #fff; |
| | | z-index: 99999; |
| | | transform:scale(.8) |
| | | } |
| | | } |
| | | .active { |
| | | background: rgba(39, 155, 170, 0.06); |
| | | border: 1px solid #279baa; |
| | | color: #279baa; |
| | | background: rgba(39,155,170,0.06); |
| | | border: 1px solid $primaryColor; |
| | | color: $primaryColor; |
| | | } |
| | | } |
| | | } |