wuliu_sy/pages/sda/index.vue

281 lines
4.6 KiB
Vue

<template>
<view class="content">
<view class="content-con">
<view class="content-left">
<view class="content-left-img">
<image src="@/static/images/logo.png" mode=""></image>
</view>
<view class="content-left-one" v-for="(item, index) in list" :key="index" @click="getlist(index)">
<view class="left-one" :class="{ 'lefcolor': num === index }">
{{item.name}}
</view>
</view>
<view class="content-left-bottom">
<view class="left-bottom-left">
<view class="left-bottom">
<image :src="oaUserInfo.avatar" mode=""></image>
</view>
<view class="left-bottom1">
{{oaUserInfo.nickname}}
</view>
</view>
<view class="left-bottom-right">
<view class="bottom-right1">
<view class="bottom-right_a">
</view>
<view class="bottom-right_b">
{{oaUserInfo.nickname ?'在线':'离线'}}
</view>
</view>
<view class="bottom-right2" @click="logout">
切换账号
</view>
</view>
</view>
</view>
<view class="content-right" v-if="num==2">
<pindex ref="list2" />
</view>
</view>
</view>
</template>
<script>
import pindex from '@/components/index/indexg.vue'
export default {
components: {
pindex
},
data() {
return {
title: 'Hello',
statusBarHeight: 0,
list: [{
name: '待取货',
id: 0
},
{
name: '待配送',
id: 1
},
{
name: '已送达',
id: 2
},
],
num: 2
}
},
computed: {
oaUserInfo() {
return this.$store.state.app.userInfo
},
},
onLoad() {
},
onPullDownRefresh() {
this.$refs.list2.refresh()
uni.stopPullDownRefresh()
},
methods: {
login() {
uni.reLaunch({
url: '/pages/oaLogin/oaLogin'
})
},
logout() {
uni.redirectTo({
url: '/pages/oaLogin/oaLogin'
})
},
getlist(index) {
this.num = index
if (index == 0) {
uni.navigateTo({
url: '/pages/index/index'
})
}
if (index == 1) {
uni.navigateTo({
url: '/pages/psong/index'
})
}
},
}
}
</script>
<style lang="scss">
page {
// // background: #Fff;
// width: 1024px;
// border: 1px solid red;
}
.content {
position: relative;
height: 100vh;
.content-con {
display: flex;
}
.content-left {
width: 136rpx;
margin-left: 10rpx;
margin-right: 10rpx;
.content-left-img {
width:50rpx;
height: 45rpx;
margin: 0 auto;
margin-bottom: 37rpx;
margin-top: 40rpx;
image {
width:50rpx;
height: 45rpx;
}
}
.content-left-one {
text-align: center;
margin-bottom: 30rpx;
}
.left-one {
width: 136rpx;
font-size: 13rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
height: 29px;
line-height: 29px;
margin: 0 auto;
}
.lefcolor {
background: #DDE9FE;
font-size: 13rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #0022C7;
}
.content-left-bottom {
position: absolute;
width: 136rpx;
bottom: 0rpx;
height: 62rpx;
background-color: #F5F8FE;
.left-bottom-left {
display: flex;
.left-bottom1 {
font-size: 12rpx;
font-family: PingFang SC-Semibold, PingFang SC;
font-weight: 600;
color: #0022C7;
margin-top: 10rpx;
}
.left-bottom {
width: 26rpx;
height: 26rpx;
border-radius: 50%;
margin-right: 10rpx;
margin-left: 30rpx;
image {
width: 26rpx;
height: 26rpx;
border-radius: 50%;
}
}
}
.left-bottom-right {
display: flex;
justify-content: space-around;
line-height: 25rpx;
margin-top: 10rpx;
.bottom-right1 {
display: flex;
.bottom-right_a {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #46BE61;
margin-top: 8rpx;
margin-right: 10rpx;
}
.bottom-right_b {
font-size: 10rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
.bottom-right2 {
font-size: 10rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
}
}
}
}
.content-right {
background: linear-gradient(180deg, #D8E6FE 0%, rgba(228, 236, 251, 0.39) 16%, rgba(244, 246, 252, 0.61) 100%);
border-radius: 15px 0px 0px 0px;
padding-top: 22rpx;
padding-left: 15rpx;
padding-right: 15rpx;
}
}
</style>