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
2bd962055c
commit
644a1eb225
@ -2,7 +2,7 @@
|
||||
<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: 70vw;height: 200px;margin-right: 20px;border-radius: 10px">
|
||||
<Row style="background:white;padding:20px;width: 67vw;height: 200px;margin-right: 20px;border-radius: 10px">
|
||||
<Col span="11" >
|
||||
<Card :bordered="false" style="width: 300px;background-color: #edf4ff">
|
||||
<template #title>网站设计</template>
|
||||
@ -10,31 +10,34 @@
|
||||
<Space direction="vertical" type="flex">
|
||||
<Progress :percent="45" status="active" />
|
||||
</Space>
|
||||
<AvatarList :list="list" />
|
||||
<AvatarList :list="data.list" />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="11" offset="2">
|
||||
<Card :bordered="false" style="width: 300px;position: relative;left:-180px; background-color: #edf4ff">
|
||||
<Card :bordered="false" style="width: 300px;position: relative;left:-208px; background-color: #edf4ff">
|
||||
<template #title>小程序设计</template>
|
||||
<p>进度</p>
|
||||
<Space direction="vertical" type="flex">
|
||||
<Progress :percent="60" status="active" stroke-color="orange"/>
|
||||
</Space>
|
||||
<AvatarList :list="list" />
|
||||
<AvatarList :list="data.list" />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col span="11" offset="2">
|
||||
<Card :bordered="false" style="width: 300px;position: relative;top:-138px;left:553px;background-color: #edf4ff">
|
||||
<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="list" />
|
||||
<AvatarList :list="data.list" />
|
||||
</Card>
|
||||
|
||||
</Col>
|
||||
|
||||
</Row>
|
||||
<Row style="width:17vw ;height: 200px;background-color: paleturquoise;border-radius: 10px;">
|
||||
|
||||
<Row style="width:20vw ;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" />
|
||||
</Col>
|
||||
@ -45,17 +48,17 @@
|
||||
</div>
|
||||
|
||||
<div style="width: 87vw;display: flex;flex-direction: row;margin-top: 15px;height:47vh;background-color: white;margin-right: 20px">
|
||||
<DescriptionList title="标题" layout="vertical" style="width: 87vw; margin-top: 20px;font-size: 15px;margin-left: 10px">
|
||||
<!-- <DescriptionList title="标题" layout="vertical" style="width: 87vw; margin-top: 20px;font-size: 15px;margin-left: 10px">-->
|
||||
<!-- <Description term="Macintosh：" style="background-color: #f5f7f9;height: 39vh;" @click="changecolor">-->
|
||||
<!-- 麦金塔电脑，是苹果电脑其中一系列的个人电脑。Macintosh 是由 Macintosh 计划发起人 Jeff Raskin（杰夫·拉斯金）根据他最爱的苹果品种 McIntosh 命名，但为了避免与音频设备制造商麦金托什实验室（McIntosh Laboratory)的名字有冲突，他故意改变了字母的拼写。-->
|
||||
<!-- </Description>-->
|
||||
<!-- <Description term="Lisa：" style="background-color: #f5f7f9;height: 39vh;width:22vw;">-->
|
||||
<!-- <Description term="Lisa：" style="background-color: #f5f7f9;height: 39vh;;">-->
|
||||
<!-- Lisa 是一款具有划时代意义的电脑，可以说没有 Lisa 就没有 Macintosh（在Mac的开发早期，很多系统软件都是在Lisa上设计的）。她具有16位CPU，鼠标，硬盘，以及支持图形用户界面和多任务的操作系统。并且随机捆绑了7个商用软件。-->
|
||||
<!-- </Description>-->
|
||||
<!-- <Description term="Newton：" style="background-color: #f5f7f9;height: 39vh;width:22vw">-->
|
||||
<!-- Apple Newton（牛顿），是世界上第一款掌上电脑（PDA），由苹果电脑公司于1993年开始制造，但是因为newton在市场上找不到其定位而需求量低而停止发展，并于1997年停止了生产。-->
|
||||
<!-- </Description>-->
|
||||
</DescriptionList>
|
||||
<!-- </DescriptionList>-->
|
||||
<!-- <div style="width: 22vw ;height:47vh;background-color: beige;border-radius: 10px" >-->
|
||||
<!--<span>在线状态预览</span>-->
|
||||
<!-- </div>-->
|
||||
@ -113,30 +116,30 @@ 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'
|
||||
});
|
||||
|
||||
// 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'
|
||||
// });
|
||||
//
|
||||
|
||||
|
||||
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
<AvatarList :list="list" />
|
||||
</template>
|
||||
<script>
|
||||
import {AvatarList} from "view-ui-plus";
|
||||
import {AvatarList, Card, Space} from "view-ui-plus";
|
||||
|
||||
export default {
|
||||
components: {AvatarList},
|
||||
components: {Space, Card, AvatarList},
|
||||
data () {
|
||||
return {
|
||||
list: [
|
||||
@ -27,3 +27,13 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<Col span="11" offset="2">
|
||||
<Card :bordered="false" style="width: 300px;position: relative;left:-100px;top:15px; background-color: #edf4ff;">
|
||||
<template #title>小程序设计</template>
|
||||
<p>进度</p>
|
||||
<Space direction="vertical" type="flex">
|
||||
<Progress :percent="60" status="active" stroke-color="orange"/>
|
||||
</Space>
|
||||
<AvatarList :list="list" />
|
||||
</Card>
|
||||
</Col>
|
||||
Loading…
x
Reference in New Issue
Block a user