管理界面完善4.

This commit is contained in:
妖姐 2024-01-21 22:32:21 +08:00
parent 273a6990fa
commit ae6f59c846
2 changed files with 49 additions and 45 deletions

View File

@ -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;
}

View File

@ -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)
})
}