From 658e6799f65eec46bc0a886eeec9524787d04d86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=96=E5=A7=90?= <2981176548@qq.com>
Date: Sat, 20 Jan 2024 19:16:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E5=AE=8C?=
 =?UTF-8?q?=E5=96=844?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/manager/Data/Index.vue      | 153 ++++++++++++++++++++++++++------
 src/manager/Data/RoleManage.vue |  27 ++++--
 src/manager/LeftBar.vue         |  26 +++---
 3 files changed, 156 insertions(+), 50 deletions(-)

diff --git a/src/manager/Data/Index.vue b/src/manager/Data/Index.vue
index d2d5a83..9c1a047 100644
--- a/src/manager/Data/Index.vue
+++ b/src/manager/Data/Index.vue
@@ -1,36 +1,76 @@
 <template>
-        <Grid square width="80vw">
-            <GridItem>1</GridItem>
-            <GridItem>2</GridItem>
-            <GridItem>3</GridItem>
-            <GridItem>4</GridItem>
-            <GridItem>5</GridItem>
-            <GridItem>6</GridItem>
-        </Grid>
-    <Row style="left: 800px">
-        <Col span="12">
+    <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: 65vw;height: 200px;margin-right: 20px;border-radius: 10px">
+        <Col span="11" >
+            <Card :bordered="false" style="width: 300px;background-color: #edf4ff">
+                <template #title>网站设计</template>
+                <p>进度</p>
+                <Space direction="vertical" type="flex">
+                    <Progress :percent="45" status="active" />
+                </Space>
+                <AvatarList :list="list" />
+            </Card>
+        </Col>
+        <Col span="11" offset="2">
+            <Card :bordered="false" style="width: 300px;position: relative;left:-200px; 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>
+        <Col span="11" offset="2">
+            <Card :bordered="false" style="width: 300px;position: relative;top:-138px;left:553px;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" />
+            </Card>
+        </Col>
+    </Row>
+    <Row style="width:22vw ;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>
-        <Col span="12">
+        <Col span="12" style="top:50px">
             <NumberInfo sub-title="近30日活跃设备" total="50,193" sub-total="5.3" status="down" />
         </Col>
     </Row>
-    <div style="display: flex; flex-direction: row; ">
-        <Carousel autoplay v-model="value" loop style="height: 500px; width: 500px; background-color: aqua">
-            <CarouselItem>
-                <div class="demo-carousel">1</div>
-            </CarouselItem>
-            <CarouselItem>
-                <div class="demo-carousel">2</div>
-            </CarouselItem>
-            <CarouselItem>
-                <div class="demo-carousel">3</div>
-            </CarouselItem>
-            <CarouselItem>
-                <div class="demo-carousel">4</div>
-            </CarouselItem>
-        </Carousel>
+        </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">
+                <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;">
+                    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>
+<!--            <div style="width: 22vw ;height:47vh;background-color: beige;border-radius: 10px" >-->
+<!--<span>在线状态预览</span>-->
+<!--            </div>-->
+        </div>
+        <div style="display: flex; flex-direction: column;height: 8vh;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" />
+            <span style="padding-right: 5px">条款</span>
+
+        </div>
+        <div style="text-align: center">Copyright © 2022 View Design All Rights Reserved'</div>
     </div>
+
+    </div>
+
     </template>
 
 
@@ -39,8 +79,65 @@
 
 
 <script setup>
-import {Carousel, CarouselItem, GridItem, NumberInfo, Row} from "view-ui-plus";
-import {ref} from "vue";
+import {
+    AvatarList,
+    Card,
+    Carousel,
+    CarouselItem, Description,
+    DescriptionList, GlobalFooter,
+    GridItem, Icon,
+    NumberInfo,
+    Row,
+    Space,
+
+} from "view-ui-plus";
+import {reactive, ref} from "vue";
 
 const value = ref(0)
+const data = reactive({
+    list: [
+        {
+            src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
+            tip: '史蒂夫·乔布斯'
+        },
+        {
+            src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
+            tip: '斯蒂夫·沃兹尼亚克'
+        },
+        {
+            src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
+            tip: '乔纳森·伊夫'
+        }
+
+    ],
+
+})
+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'
+});
+
+
+
+
+
 </script>
diff --git a/src/manager/Data/RoleManage.vue b/src/manager/Data/RoleManage.vue
index 10674a8..2fc16bf 100644
--- a/src/manager/Data/RoleManage.vue
+++ b/src/manager/Data/RoleManage.vue
@@ -1,20 +1,29 @@
 <template>
-    <Switch v-model="value" @on-change="change" />
+    <AvatarList :list="list" />
 </template>
 <script>
-import {Switch} from "view-ui-plus";
+import {AvatarList} from "view-ui-plus";
 
 export default {
-    components: {Switch},
+    components: {AvatarList},
     data () {
         return {
-            value: false
-        }
-    },
-    methods: {
-        change (status) {
-            this.$Message.info('开关状态：' + status);
+            list: [
+                {
+                    src: 'https://dev-file.iviewui.com/BbnuuEiM0QXNPHVCvb3E2AFrawIjCkqW/avatar',
+                    tip: '史蒂夫·乔布斯'
+                },
+                {
+                    src: 'https://dev-file.iviewui.com/zhj85zgAfEjChCNIKT1LQENUIOyOYCaX/avatar',
+                    tip: '斯蒂夫·沃兹尼亚克'
+                },
+                {
+                    src: 'https://dev-file.iviewui.com/TkH54UozsINlex15TAMI00GElsfsKSiC/avatar',
+                    tip: '乔纳森·伊夫'
+                }
+            ]
         }
     }
 }
 </script>
+
diff --git a/src/manager/LeftBar.vue b/src/manager/LeftBar.vue
index d6a0124..ec8e863 100644
--- a/src/manager/LeftBar.vue
+++ b/src/manager/LeftBar.vue
@@ -30,31 +30,31 @@ Submenu>MenuItem{
                                 系统管理
                             </template>
                             <MenuItem name="1-1" @click="navigateTo('/manager/UserManage')" style="text-align: center;">用户管理</MenuItem>
-                            <MenuItem name="1-2" @click="navigateTo('/manager/RoleManage')" style="text-align: center;left:-15px">角色管理</MenuItem>
-                            <MenuItem name="1-3" @click="navigateTo('/manager/PermissionsManage')" style="text-align: center;left:-15px">权限管理</MenuItem>
-                            <MenuItem name="1-4" @click="navigateTo('/manager/LogManage')" style="text-align: center;left:-15px">日志管理</MenuItem>
-                            <MenuItem name="1-5" @click="navigateTo('/manager/DailyReportManage')" style="text-align: center;left:-15px">日报管理</MenuItem>
-                            <MenuItem name="1-6" @click="navigateTo('/manager/MessageManage')" style="text-align: center;left:-15px">消息管理</MenuItem>
+                            <MenuItem name="1-2" @click="navigateTo('/manager/RoleManage')" style="text-align: center;">角色管理</MenuItem>
+                            <MenuItem name="1-3" @click="navigateTo('/manager/PermissionsManage')" style="text-align: center;">权限管理</MenuItem>
+                            <MenuItem name="1-4" @click="navigateTo('/manager/LogManage')" style="text-align: center;">日志管理</MenuItem>
+                            <MenuItem name="1-5" @click="navigateTo('/manager/DailyReportManage')" style="text-align: center;">日报管理</MenuItem>
+                            <MenuItem name="1-6" @click="navigateTo('/manager/MessageManage')" style="text-align: center;">消息管理</MenuItem>
                         </Submenu>
                         <Submenu name="2">
                             <template #title>
                                 <Icon type="ios-keypad"></Icon>
                               首页管理
                             </template>
-                            <MenuItem name="2-1" @click="navigateTo('/manager/CarouselManagement')" style="text-align: center;left:-15px">轮播图管理</MenuItem>
-                            <MenuItem name="2-2" @click="navigateTo('/manager/TeamIntroduction')" style="text-align: center;left:-15px">团队简介</MenuItem>
-                            <MenuItem name="2-3" @click="navigateTo('/manager/ProjectRecommendations')" style="text-align: center;left:-15px">项目推荐</MenuItem>
-                            <MenuItem name="2-4" @click="navigateTo('/manager/NewsDisplay')" style="text-align: center;left:-15px">新闻展示</MenuItem>
-                            <MenuItem name="2-5" @click="navigateTo('/manager/UserRecommendations')" style="text-align: center;left:-15px">用户推荐</MenuItem>
+                            <MenuItem name="2-1" @click="navigateTo('/manager/CarouselManagement')" style="text-align: center;">轮播图管理</MenuItem>
+                            <MenuItem name="2-2" @click="navigateTo('/manager/TeamIntroduction')" style="text-align: center;">团队简介</MenuItem>
+                            <MenuItem name="2-3" @click="navigateTo('/manager/ProjectRecommendations')" style="text-align: center;">项目推荐</MenuItem>
+                            <MenuItem name="2-4" @click="navigateTo('/manager/NewsDisplay')" style="text-align: center;">新闻展示</MenuItem>
+                            <MenuItem name="2-5" @click="navigateTo('/manager/UserRecommendations')" style="text-align: center;">用户推荐</MenuItem>
                         </Submenu>
                         <Submenu name="3">
                             <template #title>
                                 <Icon type="ios-analytics"></Icon>
                               信息管理
                             </template>
-                            <MenuItem name="3-1" @click="navigateTo('/manager/ProjectInformationManagement')" style="text-align: center;left:-15px" >项目信息管理</MenuItem>
-                            <MenuItem name="3-2" @click="navigateTo('/manager/TeamInformationManagement')" style="text-align: center;left:-15px">团队信息管理</MenuItem>
-                            <MenuItem name="3-3" @click="navigateTo('/manager/NewsInformationManagement')" style="text-align: center;left:-15px">新闻信息管理</MenuItem>
+                            <MenuItem name="3-1" @click="navigateTo('/manager/ProjectInformationManagement')" style="text-align: center;" >项目信息管理</MenuItem>
+                            <MenuItem name="3-2" @click="navigateTo('/manager/TeamInformationManagement')" style="text-align: center;">团队信息管理</MenuItem>
+                            <MenuItem name="3-3" @click="navigateTo('/manager/NewsInformationManagement')" style="text-align: center;">新闻信息管理</MenuItem>
                         </Submenu>
                     </Menu>
                 </Sider>