![]()
<template>
<view class="page">
<!-- 頂部欄 -->
<view class="navigate_top">
<view class="indextop_iconleft font" @click="backpage"><text></text></view>
<view class="navigate_top_title">
<text>輪牌</text>
<!-- 兩個 -->
</view>
</view>
<!-- 頂部欄end -->
<view class="tui-modal-class tui-modal-box" :class="[show?'tui-modal-show':'']">
<view class="tui-modalBtn-box" :class="[button.length>2?'tui-flex-column':'']">
<block v-for="(item,index) in button" :key="index">
<button class="tui-modal-btn" :class="['tui-'+(item.type || 'primary')+(item.plain?'-outline':''),button.length!=2?'tui-btn-width tui-mbtm':'']"
:hover-class="'tui-'+(item.plain?'outline':(item.type || 'primary'))+'-hover'" :data-index="index" @tap="handleClick" :data-text="item.text">{{item.text || "確定"}}</button>
</block>
</view>
</view>
<view class="tui-modal-mask" :class="[show?'tui-mask-show':'']" @tap="handleClickCancel"></view>
<view class="" style="margin-top: 80px;">
<scroll-view scroll-y="true" :style="{ height: windowHeight + 'px', 'background-color': '#fff' }">
<view class="container flex_row">
<!-- 左側欄 -->
<view class="nav_left">
<scroll-view scroll-y="true" style="height: 100%;">
<view class="" style="background-color: #f1f1f1;height: 20px;width: 100%;"></view>
<view v-for="(item, index) in cateItems" :key="index" style="position: relative;">
<view @click="tabtap(index, item.postGradeId)" :id="index" class="nav_left_items nowrap" :class="{ active: index == curIndex }">
{{ item.wcaName }}
</view>
<view class="booklabel" v-if="item.isAid == 1">助理</view>
</view>
</scroll-view>
</view>
<!--右側欄-->
<view class="nav_right_right">
<view class="cu-list menu-avatar" style="width: 80%;margin: 0 auto;height: 100%;">
<scroll-view scroll-y="true" style="height: 80%;">
<view
id="id"
class="cu-item"
v-for="(ite, index) in cateItemslist[curIndex].children"
:key="index"
style="margin-top: 15px;"
draggable="true"
:data-index="index"
@touchstart="start"
@touchmove.stop.prevent="move"
@touchend="stop"
>
<view
style="height: 70px;width: 90%;margin: 0 auto; position: relative;border-radius:5px;"
:class="[{ o1: ite.children_id == 1 }, { o2: ite.children_id == 2 }, { o3: ite.children_id == 3 }, { o4: ite.children_id == 4 }]"
:data-index="index"
@click="show4(index)"
>
<view class="font deleteicon" @click.stop="deleteit(ite.orderCardsId, index)">
<!-- 冒泡事件 -->

</view>
<!-- <tui-button > -->
<view class="staffimage"><image :src="ite.src" mode="aspectFill"></image></view>
<view class="">
<view class="text-white content11">{{ ite.storename }}</view>
<view class="" v-if="ite.children_id == 4 || ite.children_id == 2 || ite.children_id == 3">
<view class="uptime" v-if="ite.attendanceState == 0">
<view class="" v-if="ite.uptime == undefined">上班時間:暫未排班</view>
<view class="" v-else>上班時間:{{ ite.uptime }}</view>
</view>
<view class="uptime" v-if="ite.attendanceState == 1">
<view class="" v-if="ite.uptime == undefined">下班時間:暫未排班</view>
<view class="" v-else>下班時間:{{ ite.uptime }}</view>
</view>
</view>
<view class="action11">
<view class="text-white text-xs">{{ ite.status }}</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view
style="height: 70px;width: 80%;background-color:rgba(136,135,136,0.6) ;border-radius:5px;line-height: 70px;margin: 15px auto 0;"
@click="newStaff"
>
<view style="text-align: center; color: #fff;font-size: 16px;">新增員工</view>
</view>
<!-- 結束 -->
</view>
</view>
<!-- 右側欄 -->
</view>
</scroll-view>
</view>
<!-- 移動懸浮 -->
<view v-if="showMoveImage">
<view
id="getheight"
style="height:70px;width:50%;position: absolute;border-radius:5px;padding-top:10px;"
:class="[
{ o1: moveImagePath.children_id == 1 },
{ o2: moveImagePath.children_id == 2 },
{ o3: moveImagePath.children_id == 3 },
{ o4: moveImagePath.children_id == 4 }
]"
:data-index="index"
:style="{ left: moveLeft + 'px', top: moveTop + 'px' }"
class="flex_row"
>
<view class="staffimage"><image :src="moveImagePath.src" mode="aspectFill"></image></view>
<view class="">
<view class="text-white content11">{{ moveImagePath.storename }}</view>
<view class="" v-if="moveImagePath.children_id == 4 || moveImagePath.children_id == 2 || moveImagePath.children_id == 3">
<view class="uptime" v-if="moveImagePath.attendanceState == 0">
<view class="" v-if="moveImagePath.uptime == undefined">上班時間:暫未排班</view>
<view class="" v-else>上班時間:{{ moveImagePath.uptime }}</view>
</view>
<view class="uptime" v-if="moveImagePath.attendanceState == 1">
<view class="" v-if="moveImagePath.uptime == undefined">下班時間:暫未排班</view>
<view class="" v-else>下班時間:{{ moveImagePath.uptime }}</view>
</view>
</view>
</view>
<view class="action11">
<view class="text-white text-xs">{{ moveImagePath.status }}</view>
</view>
</view>
</view>
<!-- 移動懸浮 -->
</view>
</template>
<script>
export default {
data() {
return {
imageBasePos: {
x0: -1,
y0: -1,
w: -1,
h: -1
},
windowHeight: '',
curentitem:0,
showMoveImage: false,
moveImagePath: '',
moveLeft: 0,
moveTop: 0,
deltaLeft: 0,
deltaTop: 0,
stopleft: 0,
stoptop: 0,
dragIndex: null,
targetImageIndex: null,
curIndex: 0,
cuecityIndex: 0,
cuestoreIndex: 0,
color1: ' red;',
modalName: null,
skin: false,
index: 1,
showMask: false,
cateItems: [],
time: '',
cateItemslist: [],
show: false,
button: [
{
text: '休息中',
type: 'gray',
plain: true
},
{
text: '候客中',
type: 'green',
plain: true
},
{
text: '工作中',
type: 'red',
plain: true
},
{
text: '外出中',
type: 'blue',
plain: true
}
],
};
},
computed: {
posMoveImageLeft: function() {
return this.moveLeft + 'px';
},
posMoveImageTop: function() {
return this.moveTop + 'px';
},
isShowDel: function() {
if (this.enableDel === false) {
return false;
} else {
return true;
}
},
isShowAdd: function() {
if (this.enableAdd === false) {
return false;
}
if (this.limit && this.cateItems[this.curIndex].children.length >= this.limit) {
return false;
}
return true;
},
isDragable: function() {
if (this.enableDrag === false) {
return false;
} else {
return true;
}
}
},
onShow() {
this.moveLeft = 0
this.cateItemslist = [];
var date = new Date();
//時間轉換·
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? '0' + d : d;
this.time = y + '-' + m + '-' + d;
// this.time = '2019-11-04';
var opts = {
url: '/app/wheelCard/list',
method: 'GET',
header: 'json'
};
var param = {
storeId: getApp().globalData.storeId
};
this.$https.httpTokenRequest(opts, param).then(
res => {
var list = [];
for (var i = 0; i < res.data.rows.length; i++) {
list.push({ children: [] });
}
this.cateItemslist = list;
if (res.data.code === 0) {
this.cateItems = res.data.rows;
this.getList();
} else {
uni.showToast({
title: '網絡錯誤'
});
}
},
error => {
uni.showToast({
title: '網絡請求超時,請重試',
icon: 'none'
});
uni.hideLoading();
}
);
},
onLoad() {
var that = this;
uni.getSystemInfo({
success: function(res) {
that.windowHeight = res.windowHeight - 80;
}
});
},
onBackPress(options) {
var list = [];
if (this.cateItemslist.length > 0) {
for (var i = 0; i < this.cateItemslist.length; i++) {
for (var j = 0; j < this.cateItemslist[i].children.length; j++) {
list.push({
staffId: this.cateItemslist[i].children[j].staffId,
storeId: getApp().globalData.storeId,
mechanismId: getApp().globalData.mechanismId,
ocOrder: j + 1,
wheelCardId: Number(this.cateItemslist[i].children[j].wheelCardId),
ocState: this.cateItemslist[i].children[j].children_id - 1,
orderCardsId: this.cateItemslist[i].children[j].orderCardsId
});
}
}
// console.log(list, '');
var that = this;
if (options.from === 'navigateBack' || options.from === 'backbutton') {
uni.showModal({
title: '提示',
content: '是否保存輪牌設置？',
success: function(res) {
if (res.confirm) {
// if()
var opts = {
url: '/app/wheelCard/editOrderCards',
method: 'POST',
header: 'json'
};
var param = list;
that.$https.httpTokenRequest(opts, param).then(
res => {
// console.log(res, '封裝');
//打印請求返回的數據
uni.hideLoading();
},
error => {
uni.showToast({
title: '網絡請求超時,請重試',
icon: 'none'
});
uni.hideLoading();
}
);
}
}
});
}
}
},
methods: {
newStaff() {
// console.log(this.cateItemslist, '11111111111');
getApp().globalData.cateItems = this.cateItemslist;
var id = this.cateItems[this.curIndex].postGradeId;
var wheelCardId = this.cateItems[this.curIndex].wheelCardId;
uni.navigateTo({
url: '../turnon/addnew?id=' + id + '&leftindex=' + this.curIndex + '&wheelCardId=' + wheelCardId
});
},
getList() {
uni.showLoading({
title: '獲取數據'
});
var opts = {
url: '/app/wheelCard/orderCardsList',
method: 'POST',
header: 'json'
};
var param = {
ocDate: this.time,
wheelCardId: this.cateItems[this.curIndex].wheelCardId
};
this.$https.httpTokenRequest(opts, param).then(
res => {
// console.log(res.data);
if (res.data.rows.length == 0) {
uni.showToast({
title: '暫無輪牌數據',
icon: 'none'
});
} else {
this.cateItemslist[this.curIndex].children = [];
var list = this.cateItemslist;
for (var i = 0; i < res.data.rows.length; i++) {
var time = res.data.rows[i].attTime.split(' ');
list[this.curIndex].children.push({
attendanceState: res.data.rows[i].attendanceState,
children_id: res.data.rows[i].ocState + 1,
src: 'http://qiniu.qm65.com/' + res.data.rows[i].staPhoto,
storename: res.data.rows[i].staName,
uptime: time[1],
status: this.button[res.data.rows[i].ocState].text,
// status:this.button[1].text,
staffId: res.data.rows[i].staffId,
wheelCardId: res.data.rows[i].wheelCardId,
orderCardsId: res.data.rows[i].orderCardsId
});
}
// console.log(list, 'list');
this.cateItemslist = list;
uni.hideLoading();
}
},
error => {
uni.showToast({
title: '網絡請求超時,請重試',
icon: 'none'
});
uni.hideLoading();
}
);
},
backpage() {
uni.navigateBack({
delta: 1,
animationType: 'pop-out',
animationDuration: 200
});
},
show4(ite) {
console.log(ite, '111111');
this.curentitem = ite;
this.show = true;
},
hide() {
this.show = false;
},
handleClickCancel() {
this.hide();
},
handleClick(e) {
console.log(e);
let index = e.currentTarget.dataset.index;
this.cateItemslist[this.curIndex].children[this.curentitem].children_id = Number(index) + 1;
this.cateItemslist[this.curIndex].children[this.curentitem].status = this.button[index].text;
var list = this.cateItemslist[this.curIndex].children[this.curentitem];
if (index == 0) {
this.cateItemslist[this.curIndex].children.splice(this.curentitem, 1);
this.cateItemslist[this.curIndex].children.push(list);
}
// console.log(this.cateItemslist[this.curIndex].children, 'this.cateItemslist[this.curIndex].children');
// this.curentitem.children_id = index
// console.log(this.cateItemslist[this.curIndex].children[this.curentitem].children_id)
this.hide();
},
//一級分類點擊
tabtap(index, id) {
this.curIndex = index;
this.getList();
},
// ListTouch觸摸開始
ListTouchStart(e) {
this.listTouchStart = e.touches[0].pageX;
},
// 刪除
// ListTouch計算方向
ListTouchMove(e) {
this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left';
},
// ListTouch計算滾動
ListTouchEnd(e) {
if (this.listTouchDirection == 'left') {
this.modalName = e.currentTarget.dataset.target;
} else {
this.modalName = null;
}
this.listTouchDirection = null;
},
deleteit(id, index) {
var that = this;
uni.showModal({
title: '是否刪除',
content: '確定今天移除該員工',
success: function(res) {
if (res.confirm) {
var opts = {
url: '/app/wheelCard/remove',
method: 'GET',
header: 'json'
};
var param = {
orderCardsId: id
};
that.$https.httpTokenRequest(opts, param).then(
res => {
// console.log(res.data);
uni.hideLoading();
that.cateItemslist[that.curIndex].children.splice(index, 1);
uni.showToast({
title: '刪除成功',
icon: 'success'
});
},
error => {
uni.showToast({
title: '網絡請求超時,請重試',
icon: 'none'
});
uni.hideLoading();
}
);
}
}
});
},
// 刪除end
initImageBasePos: function() {
let paddingRate = 0.024;
_self = this;
//計算圖片基準位置
uni.getSystemInfo({
success: function(obj) {
let screenWidth = obj.screenWidth;
let leftPadding = Math.ceil(paddingRate * screenWidth);
let imageWidth = Math.ceil((screenWidth - 2 * leftPadding) / 4);
_self.imageBasePos.x0 = leftPadding;
_self.imageBasePos.w = imageWidth;
_self.imageBasePos.h = imageWidth;
}
});
},
findOverlapImage: function(posX, posY) {
var begin = 100;
var end = 192;
let indx;
var length = this.cateItemslist[this.curIndex].children.length;
if (begin < posY && end > posY) {
indx = 0;
return indx;
}
for (var i = 1; i <= length; i++) {
begin = begin + 92;
end = end + 92;
if (begin < posY && end > posY) {
// console.log(posY,'滿足的')
indx = i;
// console.log(i,'交換地址')
return indx;
}
}
},
isDragging: function(indx) {
// console.log(indx)
return this.dragIndex === indx;
},
start: function(e) {
//元素的寬度
console.log(e)
const query = uni.createSelectorQuery().in(this);
query.select('.cu-item').boundingClientRect(data => {
// console.log(data.left);
this.moveLeft = data.left;
}).exec();
if (!this.isDragable) {
return;
}
this.dragIndex = e.currentTarget.dataset.index; //其實地址
// console.log(e.currentTarget.dataset.index, '當前位置第幾個');
this.moveImagePath = this.cateItemslist[this.curIndex].children[this.dragIndex];
// console.log(this.moveImagePath)
this.showMoveImage = true;
const touch = e.touches[0]; //獲取第一個觸點
this.showMoveImage = true;
// 移動
this.moveTop = e.touches[0].pageY - 40;
console.log( this.moveTop,'this.moveTop')
},
move: function(e) {
if (!this.isDragable) {
return;
}
const touch = e.touches[0]; //獲取第一個觸點
// console.log(touch,'移動')
if (this.deltaLeft === 0) {
this.deltaLeft = touch.clientX - this.moveLeft;
this.deltaTop = touch.clientY - this.moveTop;
}
this.stopleft = touch.pageX;
this.stoptop = touch.pageY;
// console.log(this.stoptop,'結束')
//設置移動圖片位置
this.moveLeft = touch.clientX - this.deltaLeft;
this.moveTop = touch.clientY - this.deltaTop;
},
stop: function(e) {
// console.log(this.stoptop, '結束');
// console.log(this.deltaTop,'結束X')
var leng = this.cateItemslist[this.curIndex].children.length * 87;
// console.log(leng,'長度')
if (this.stoptop > leng) {
// console.log(this.dragIndex);
// console.log(this.cateItemslist[this.curIndex].children.length)
this.targetImageIndex = this.cateItemslist[this.curIndex].children.length - 1;
if (this.dragIndex !== this.targetImageIndex && this.deltaTop != 0 && this.targetImageIndex >= 0) {
this.cateItemslist[this.curIndex].children[this.dragIndex] = this.cateItemslist[this.curIndex].children[this.targetImageIndex];
this.cateItemslist[this.curIndex].children[this.targetImageIndex] = this.moveImagePath;
}
} else {
this.targetImageIndex = this.findOverlapImage(this.stopleft, this.stoptop);
// console.log(this.targetImageIndex, '結束Y');
// console.log(this.targetImageIndex)
if (this.dragIndex !== this.targetImageIndex && this.deltaTop != 0 && this.targetImageIndex >= 0) {
this.cateItemslist[this.curIndex].children[this.dragIndex] = this.cateItemslist[this.curIndex].children[this.targetImageIndex];
this.cateItemslist[this.curIndex].children[this.targetImageIndex] = this.moveImagePath;
}
}
this.dragIndex = null;
this.targetImageIndex = null;
this.deltaLeft = 0;
this.deltaTop = 0;
this.showMoveImage = false;
// this.showMoveImage = false
// console.log(this.cateItemslist[this.curIndex], '當前輪牌順序');
// this.$emit('input', this.cateItemslist[this.curIndex].children)
},
clearLoop() {
clearInterval(this.Loop);
},
// handleClick(e) {
// if (!this.show) return;
// const dataset = e.currentTarget.dataset;
// console.log(dataset,'dataset')
// },
// handleClickCancel() {
// if (!this.maskClosable) return;
// },
px(num) {
return uni.upx2px(num) + 'px'
}
}
};
</script>
<style scoped>
/* 彈出層 */
.tui-modal-box {
position: fixed;
width: 84%;
left: 50%;
top: 50%;
margin: auto;
background: #fff;
z-index: 99998;
transition: all 0.3s ease-in-out;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
border-radius: 24upx;
box-sizing: border-box;
padding: 40upx 60upx;
}
.tui-modal-show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.tui-modal-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 99996;
transition: all 0.3s ease-in-out;
opacity: 0;
height: 100%;
visibility: hidden;
}
.tui-mask-show {
visibility: visible;
opacity: 1;
}
.tui-modal-title {
text-align: center;
font-size: 34upx;
color: #333;
padding-top: 20upx;
font-weight: bold;
}
.tui-modal-content {
text-align: center;
color: #999;
font-size: 28upx;
padding-top: 20upx;
padding-bottom: 60upx;
}
.tui-mtop {
margin-top: 30upx;
}
.tui-mbtm {
margin-bottom: 30upx;
}
.tui-modalBtn-box {
display: flex;
align-items: center;
justify-content: center;
}
.tui-flex-column {
flex-direction: column;
}
.tui-modal-btn {
width: 44%;
height: 68upx;
line-height: 68upx;
position: relative;
border-radius: 10upx;
font-size: 24upx;
overflow: visible;
}
.tui-modal-btn::after {
content: "";
position: absolute;
width: 200%;
height: 200%;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5, 0.5);
transform: scale(0.5, 0.5);
left: 0;
top: 0;
border-radius: 20upx;
}
.tui-btn-width {
width: 80% !important;
}
.tui-primary {
background: #5677fc;
color: #fff;
}
.tui-primary-hover {
background: #4a67d6;
color: #e5e5e5;
}
.tui-primary-outline {
color: #5677fc;
background: none;
}
.tui-primary-outline::after {
border: 1px solid #5677fc;
}
.tui-danger {
background: #ed3f14;
color: #fff;
}
.tui-danger-hover {
background: #d53912;
color: #e5e5e5;
}
.tui-danger-outline {
color: #ed3f14;
background: none;
}
.tui-danger-outline::after {
border: 1px solid #ed3f14;
}
.tui-red {
background: #e41f19;
color: #fff;
}
.tui-red-hover {
background: #c51a15;
color: #e5e5e5;
}
.tui-red-outline {
color: #e41f19;
background: none;
}
.tui-red-outline::after {
border: 1px solid #e41f19;
}
.tui-warning {
background: #ff7900;
color: #fff;
}
.tui-warning-hover {
background: #e56d00;
color: #e5e5e5;
}
.tui-warning-outline {
color: #ff7900;
background: none;
}
.tui-warning-outline::after {
border: 1px solid #ff7900;
}
.tui-green {
background: #19be6b;
color: #fff;
}
.tui-green-hover {
background: #16ab60;
color: #e5e5e5;
}
.tui-green-outline {
color: #19be6b;
background: none;
}
.tui-green-outline::after {
border: 1px solid #19be6b;
}
.tui-white {
background: #fff;
color: #333;
}
.tui-white-hover {
background: #f7f7f9;
color: #666;
}
.tui-white-outline {
color: #333;
background: none;
}
.tui-white-outline::after {
border: 1px solid #333;
}
.tui-gray {
background: #ededed;
color: #999;
}
.tui-gray-hover {
background: #d5d5d5;
color: #898989;
}
.tui-gray-outline {
color: #999;
background: none;
}
.tui-gray-outline::after {
border: 1px solid #999;
}
.tui-blue {
background: #36A6D2;
color: #999;
}
.tui-blue-hover {
background: #d5d5d5;
color: #36A6D2;
}
.tui-blue-outline {
color: #36A6D2;
background: none;
}
.tui-blue-outline::after {
border: 1px solid #36A6D2;
}
.tui-outline-hover {
opacity: 1;
}
.tui-circle-btn {
border-radius: 40upx !important;
}
.tui-circle-btn::after {
border-radius: 80upx !important;
}
/* 彈出層 */
.booklabel {
position: absolute;
top: 0%;
right: 0%;
font-size: 10px;
color: #ff5153;
}
/* 頂部欄 */
.mainpage {
position: absolute;
top: 80px;
/* bottom: 50%; */
width: 100%;
background-color: #ffffff;
height: 100%; /* 解決iPhone下滑彈出 */
/* padding: 5%; */
}
.page {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.cpt-mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
z-index: 99;
}
/* 頂部欄 */
.navigate_top {
display: flex;
flex-direction: row;
padding-top: var(--status-bar-height); /* 獲取手機信息頂部欄 */
background-color: #53c9c3; /* 主要色彩 */
height: 80px;
width: 100%;
position: fixed;
top: 0;
z-index: 999;
}
.indextop_iconleft {
position: relative;
font-size: 20px;
width: 25%;
text-align: left;
padding-left: 6%;
margin: auto 0;
color: #ffffff;
}
.navigate_top_title {
width: 50%;
margin: auto 0;
text-align: center;
font-size: 18px;
color: #fff;
font-weight: bold;
}
.indextop_iconright {
font-size: 23px;
width: 25%;
padding-right: 1%;
margin: auto 0;
text-align: center;
color: #ffffff;
font-weight: bold;
}
/* 頂部欄end */
.text-xs {
font-size: 16px !important;
font-weight: bold !important;
}
.face {
background-color: #fff !important;
}
.dragging {
transform: scale(1.2);
}
.container {
height: 100%;
border-top: 2px solid #f1f1f1;
}
.present {
width: 150px;
height: 25px;
line-height: 25px;
color: rgba(80, 80, 80, 1);
font-size: 15px;
text-align: left;
padding: 8px 0 8px 20px;
}
.nav_left {
background-color: #f1f1f1 !important;
width: 30%;
height: 100%;
}
.nav_left_items {
width: 100%;
height: 43px;
color: rgba(80, 80, 80, 1);
background-color: #f1f1f1;
font-size: 16px;
line-height: 43px;
text-align: center;
margin: 10px auto;
}
.active {
border-radius: 5px;
margin: 10px auto;
color: rgba(255, 108, 144, 1);
background-color: rgba(255, 255, 255, 1);
}
.nav_right_middle {
position: absolute;
top: 3px;
left: 21%;
background-color: #fff;
width: 22%;
height: 100%;
}
.nav_right_items_city {
width: 80px;
height: 43px;
color: rgba(128, 128, 128, 1);
background-color: rgba(255, 255, 255, 1);
font-size: 13px;
line-height: 43px;
text-align: center;
}
.on {
color: rgba(255, 108, 144, 1);
}
.nav_right_right {
/* padding-top: 10px; */
/* position: absolute; */
height: 100%;
width: 70%;
border-left: 2px solid #f1f1f1;
background-color: #fff;
}
.time {
margin-top: 15px;
}
.nav_right_items_store {
/* background-color: #f1f1f1; */
}
.nav_right_items_store_child {
/* width: 215px; */
width: 100%;
height: 75px;
display: flex;
flex-direction: column;
border-bottom: 2px solid #f1f1f1;
position: relative;
padding-left: 8px;
}
.nav_right_items_store_child1 {
display: block;
height: 14px;
color: rgba(80, 80, 80, 1);
font-size: 13px;
text-align: left;
font-weight: bold;
margin-top: 2px;
}
.nav_right_items_store_child2 {
height: 66px;
color: rgba(166, 166, 166, 1);
font-size: 13px;
text-align: left;
position: absolute;
overflow: hidden;
bottom: 6px;
padding-right: 6px;
}
.logo_go {
position: absolute;
width: 33px;
height: 20px;
right: 10px;
top: 5px;
color: rgba(255, 255, 255, 1);
background-color: rgba(255, 108, 144, 1);
border-radius: 14px;
font-size: 13px;
line-height: 20px;
text-align: center;
}
.itemlabel {
padding: 10px 15px;
width: 80%;
height: 80px;
color: #fff;
border-radius: 5px;
margin: 25px auto;
position: relative;
}
.deleteicon {
position: absolute;
top: -18%;
right: 0%;
font-size: 25px;
color: #000;
}
.content1 {
margin-left: 25%;
width: 50%;
}
.action1 {
text-align: center;
width: 50%;
padding-top: 10px;
/* position: absolute; */
}
.staffimage {
width: 40px;
height: 40px;
border-radius: 50%;
position: absolute;
top: 19%;
left: 4%;
}
.staffimage image {
width: 40px;
height: 40px;
border-radius: 50%;
}
.content11 {
font-size: 16px !important;
font-weight: bold !important;
position: absolute;
top: 18%;
left: 25%;
}
.o3 {
background-color: #ff5153 !important;
}
.o2 {
background-color: #26c9b6 !important;
}
.o4 {
background-color: #2cb6e7 !important;
}
.o1 {
background-color: #b6c1d3 !important;
}
.uptime {
font-size: 16px !important;
position: absolute;
bottom: 10%;
left: 25%;
color: #fff;
}
.action11 {
text-align: center;
position: absolute;
top: 20%;
right: 10%;
}
</style>
