mirror of
https://gitee.com/XiaoLFeng/JSL_OrganizeInternalOA_Web.git
synced 2025-06-08 03:33:03 +08:00
管理界面完善4.
This commit is contained in:
parent
273a6990fa
commit
ae6f59c846
@ -2,10 +2,10 @@
|
||||
<div style="background-color: #eeeeee;width: 87vw;height: 85vh">
|
||||
<div style="display: flex;flex-direction: row;width: 87vw;margin-top: 20px;height: 30vh;">
|
||||
|
||||
<Row style="background:white;padding:20px;width: 67vw;height: 200px;margin-right: 20px;border-radius: 10px">
|
||||
<Row style="background:white;padding:20px;width: 50vw;height: 200px;margin-right: 20px;border-radius: 10px">
|
||||
<Col span="11" >
|
||||
<Card :bordered="false" style="width: 300px;background-color: #edf4ff">
|
||||
<template #title>网站设计</template>
|
||||
<template #title><strong>后端设计</strong></template>
|
||||
<p>进度</p>
|
||||
<Space direction="vertical" type="flex">
|
||||
<Progress :percent="45" status="active" />
|
||||
@ -14,8 +14,8 @@
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="11" offset="2">
|
||||
<Card :bordered="false" style="width: 300px;position: relative;left:-208px; background-color: #edf4ff">
|
||||
<template #title>小程序设计</template>
|
||||
<Card :bordered="false" style="width: 300px; background-color: #edf4ff;margin-right: 10px">
|
||||
<template #title><strong>前端设计</strong></template>
|
||||
<p>进度</p>
|
||||
<Space direction="vertical" type="flex">
|
||||
<Progress :percent="60" status="active" stroke-color="orange"/>
|
||||
@ -23,23 +23,28 @@
|
||||
<AvatarList :list="data.list" />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="11" offset="2">
|
||||
<Card :bordered="false" style="width: 300px;position: relative;top:-149px;left:558px;background-color: #edf4ff">
|
||||
<template #title>后台设计</template>
|
||||
<p>进度</p>
|
||||
<Space direction="vertical" type="flex" >
|
||||
<Progress :percent="80" status="active" stroke-color="green"/>
|
||||
</Space>
|
||||
<AvatarList :list="data.list" />
|
||||
</Card>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
<div style="width: 15vw;height: 200px;background-color: #d5eef6;border-radius: 10px;margin-right:20px;">
|
||||
<Space wrap style="width: 15vw;height: 150px;">
|
||||
<Circle :percent="percent" :stroke-color="color" style="margin-left: 50px;margin-top: 10px">
|
||||
<Icon v-if="percent === 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
|
||||
<span v-else style="font-size:24px">{{ percent }}%</span>
|
||||
</Circle>
|
||||
<!-- <ButtonGroup size="large">-->
|
||||
<!-- <Button icon="ios-add" @click="add"></Button>-->
|
||||
<!-- <Button icon="ios-remove" @click="minus"></Button>-->
|
||||
<!-- </ButtonGroup>-->
|
||||
</Space>
|
||||
<span style="height:50px;margin-left: 70px;"><strong >项目总进度</strong></span>
|
||||
|
||||
<Row style="width:20vw ;height: 200px;background-color: paleturquoise;border-radius: 10px;">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<Row style="width:25vw ;height: 200px;background-color: paleturquoise;border-radius: 10px;">
|
||||
<Col span="12" style="top:50px">
|
||||
<NumberInfo sub-title="近7日活跃设备" total="12,321" sub-total="17.1" status="up" />
|
||||
<NumberInfo sub-title="近7日活跃设备" total="12,321" sub-total="17.1" status="up"/>
|
||||
</Col>
|
||||
<Col span="12" style="top:50px">
|
||||
<NumberInfo sub-title="近30日活跃设备" total="50,193" sub-total="5.3" status="down" />
|
||||
@ -63,7 +68,7 @@
|
||||
<!--<span>在线状态预览</span>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column;height: 8vh;width: 87vw;background-color: #5885a8;margin-top: 6px;">
|
||||
<div style="bottom:0;display: flex; flex-direction: column;height: 9vh;width: 87vw;background-color: #5885a8;margin-top: 6px;">
|
||||
<div style="text-align: center;display: flex;flex-direction: row;justify-content: center;align-content: center ;padding: 5px">
|
||||
<span style="padding-right: 5px">帮助</span>
|
||||
<Icon style="font-size: 20px;padding-right:5px " type="logo-tux" />
|
||||
@ -87,7 +92,7 @@ import {
|
||||
AvatarList,
|
||||
Card,
|
||||
Carousel,
|
||||
CarouselItem, Description,
|
||||
CarouselItem, Circle, Description,
|
||||
DescriptionList, GlobalFooter,
|
||||
GridItem, Icon,
|
||||
NumberInfo,
|
||||
@ -95,9 +100,18 @@ import {
|
||||
Space,
|
||||
|
||||
} from "view-ui-plus";
|
||||
import {reactive, ref} from "vue";
|
||||
import {computed, reactive, ref} from "vue";
|
||||
|
||||
|
||||
const value = ref(0)
|
||||
const percent = ref(20)
|
||||
const color = computed(() => {
|
||||
let color = '#2db7f5';
|
||||
if (percent.value === 100) {
|
||||
color = '#5cb85c';
|
||||
}
|
||||
return color;
|
||||
})
|
||||
const data = reactive({
|
||||
list: [
|
||||
{
|
||||
@ -116,30 +130,19 @@ const data = reactive({
|
||||
],
|
||||
|
||||
})
|
||||
// const datatwo = reactive({
|
||||
// links: [
|
||||
// {
|
||||
// key: '帮助',
|
||||
// title: '帮助',
|
||||
// href: 'https://www.iviewui.com',
|
||||
// blankTarget: true
|
||||
// },
|
||||
// {
|
||||
// key: 'github',
|
||||
// icon: 'logo-github',
|
||||
// href: 'https://github.com/view-design/ViewUIPlus',
|
||||
// blankTarget: true
|
||||
// },
|
||||
// {
|
||||
// key: '条款',
|
||||
// title: '条款',
|
||||
// href: '',
|
||||
// blankTarget: true
|
||||
// }
|
||||
// ],
|
||||
// copyright: 'Copyright © 2022 View Design All Rights Reserved'
|
||||
// });
|
||||
//
|
||||
function add () {
|
||||
if (percent.value >= 100) {
|
||||
return false;
|
||||
}
|
||||
percent.value += 10;
|
||||
}
|
||||
function minus () {
|
||||
if (percent.value <= 0) {
|
||||
return false;
|
||||
}
|
||||
percent.value -= 10;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -252,6 +252,7 @@ onMounted(() => {
|
||||
*/
|
||||
|
||||
function getAll() {
|
||||
|
||||
requests.userAllCurrent(AllUser,token).then((res)=>{
|
||||
console.log(res)
|
||||
// states.data = res.data.data
|
||||
@ -260,7 +261,7 @@ function getAll() {
|
||||
for (let i = 0; i < res.data.data.length; i++) {
|
||||
states.data[i] = res.data.data[i].user
|
||||
}
|
||||
console.log("getAll:",res)
|
||||
console.log("getAll:",states.data)
|
||||
})
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user