图床项目进度(一)——UI首页

1. 前言

前面我不是说了要做一个图床吗,现在在做ui。

我vue水平不够高,大部分参考b站项目照猫画虎。

  1. vue实战后台

我使用ts,vite,vue3进行了重构。
当然,我对这些理解并不深刻,许多代码都是游离于表面,仅仅给大家参考
在这里插入图片描述

2. 过程

2.1. 使用elemen ui进行导航制作。

这里直接用element ui菜单直接粘上去就可以,几乎没有任何其他处理

<template><el-menudefault-active="2"class="el-menu-vertical-demo":collapse="useHeaderStore().tab.isCollapse"@open="handleOpen"@close="handleClose"><img class="logo" src="../..//src/assets/云盘上传.png"><h1 class="title">{{useHeaderStore().tab.isCollapse? "图床":"好玩图床"}}</h1><el-sub-menu v-for="item of currentMenu.items" :index="item.title"><template #title><el-icon ><component :is=item.icon></component></el-icon><span>{{item.title}}</span></template><el-menu-item @click="clickMenu(cItem.path,cItem.title)" v-for="cItem of item.children" :index="cItem.title "><el-icon><component :is = cItem.icon></component></el-icon>{{cItem.title}}</el-menu-item></el-sub-menu></el-menu>
</template>

值得注意的是icon动态绑定的展示和vue2略有不同

     <el-icon ><component :is=item.icon></component>//使用component :is=item.icon展示</el-icon>

2.2.head制作

在这里插入图片描述

header部分主要有一个折叠开关,由于和左侧栏不是一个组件里,我使用pinia进行数据传递。

  1. 大菠萝官网
<template><div class="header-container"><div class="l-content"><el-button @click="handleMenu" :icon="Menu" size="mini" /><!-- 面包屑 --><el-breadcrumb separator="/" style="margin-left: 20px"><el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.title }}</el-breadcrumb-item></el-breadcrumb></div><div class="r-content"><el-dropdown><span class="el-dropdown-link"><img class="user" src="../assets/meiyangyang.jpg"></span><template #dropdown><el-dropdown-menu><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div>
</template>
<script lang="ts" setup>
import { Menu } from '@element-plus/icons-vue';
import useHeaderStore from "@/store/moudle/header";
import {computed} from "vue";const handleMenu = () => {const headerStore   = useHeaderStore();headerStore.tab.isCollapse = !headerStore.tab.isCollapse;};
const tags = computed(() => {const headerStore = useHeaderStore();return headerStore.tab.tabList;
});
</script>

2.3.首页制作

  1. 两个表格
<el-card class="box-card"><div class="user"><img src="../assets/meiyangyang.jpg"><div class="user-info"><p class="name">Admin</p><p class="access">超级管理员</p></div></div><div class="login-info"><p>上次登录时间 <span>2021-07-25</span></p><p>上次登录地点 <span>上海</span></p></div></el-card><el-card style="margin-top: 20px; height: 410px"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="文件id"  /><el-table-column prop="name" label="上传日期"  /><el-table-column prop="address" label="本月引用" /><el-table-column prop="allLinks" label="总引用" /></el-table></el-card>

这个直接element ui贴贴就完了。

  1. 6个颜色卡
    6个盒子,这个可能css难写点,我基本都是抄的给不出什么建议。
    在这里插入图片描述
<div class="num"><el-card v-for="item in labelDate" :key="item.label" :body-style="{display: 'flex',padding: '0',height : '80px'}"><div class="icon" :style="{backgroundColor:item.color}"><el-icon size="30px" style="text-align: center"><component  :is=item.icon ></component></el-icon></div><div class="details"><p class="sum">{{item.sum}}次</p><p class="label">{{item.label}}</p></div></el-card></div>
<style lang="less" scoped>.login-info{p{line-height: 28px;font-size: 14px;color : #999999;span{color: #666666;margin-left: 60px;}}
}
.user{margin-bottom: 20px;padding-bottom: 20px;border-bottom: 1px solid #ccc;display: flex;align-items: center;img{margin-right: 40px;width: 150px;height: 150px;border-radius: 50%;}.user-info{.name{font-size: 32px;margin-bottom: 10px;}.access{color: #999999;}}}
.card-header {display: flex;justify-content: space-between;align-items: center;
}.text {font-size: 14px;
}.item {margin-bottom: 18px;
}.box-card {
}.num {display: flex;flex-wrap: wrap;justify-content: space-between;.icon {display: flex;justify-content: center;align-items: center;width: 80px;height: 80px;text-align: center;line-height: 80px;color: #fff;}.details {margin-left: 15px;display: flex;flex-direction: column;justify-content: center;.sum {font-size: 20px;margin-bottom: 10px;line-height: 30px;height: 30px;}.label {font-size: 14px;color: #999;text-align: center;}}.el-card {margin-left: 5px;width: 32%;margin-bottom: 20px;}
}
.graph{display: flex;margin-top: 20px;justify-content: space-between;.el-card{width: 48%;}
}</style>
  1. 图表制作。

在这里插入图片描述图标是使用echart插件制作的,很好用,推荐。

  1. echarts官网

这个直接定位id然后塞进去就行,写在钩子函数里。

onMounted(() => {const myCharts = echarts.init(document.getElementById('chart1'));const option = {title: {text: ''},tooltip: {trigger: 'axis'},legend: {data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']},grid: {left: '3%',right: '4%',bottom: '10%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},{name: 'Video Ads',type: 'line',stack: 'Total',data: [150, 232, 201, 154, 190, 330, 410]},{name: 'Direct',type: 'line',stack: 'Total',data: [320, 332, 301, 334, 390, 330, 320]},{name: 'Search Engine',type: 'line',stack: 'Total',data: [820, 932, 901, 934, 1290, 1330, 1320]}]};myCharts.setOption(option);// 柱状图const echarts2 = echarts.init(document.getElementById('chart2'));const option2 = {legend: {// 图例文字颜色textStyle: {color: "#333",},},grid: {left: "20%",},// 提示框tooltip: {trigger: "axis",},xAxis: {type: "category", // 类目轴data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],axisLine: {lineStyle: {color: "#17b3a3",},},axisLabel: {interval: 0,color: "#333",},},yAxis: [{type: "value",axisLine: {lineStyle: {color: "#17b3a3",},},},],color: ["#2ec7c9", "#b6a2de"],series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]},{name: '购买',type: 'bar',data: [5, 20, 36, 10, 10, 20]}],};echarts2.setOption(option2);const option3 = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: 40,fontWeight: 'bold'}},labelLine: {show: false},data: [{ value: 1048, name: 'Search Engine' },{ value: 735, name: 'Direct' },{ value: 580, name: 'Email' },{ value: 484, name: 'Union Ads' },{ value: 300, name: 'Video Ads' }]}]};//饼图const echarts3 = echarts.init(document.getElementById('chart3'));option && echarts3.setOption(option3);

后面暂时没了,最后写完的话,我会把源码放出来

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/102771.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

小白到运维工程师自学之路 第七十九集 (基于Jenkins自动打包并部署Tomcat环境)2

紧接上文 4、新建Maven项目 clean package -Dmaven.test.skiptrue 用于构建项目并跳过执行测试 拉到最后选择构建后操作 SSH server webExec command scp 192.168.77.18:/root/.jenkins/workspace/probe/psi-probe-web/target/probe.war /usr/local/tomcat/webapps/ /usr/loca…

mysql基本操作

常用的数据类型 int 整型用于定义整数类型的数据float 单精度浮点4字节32位 准确表示到小数点后六位 double 双精度浮点8字节64位双精度浮点8字节64位char 固定长度的字符类型用于定义字符类型数据varchar可变长度的字符类型 text文本image图片de…

Java IO流(五)Netty实战[TCP|Http|心跳检测|Websocket]

Netty入门代码示例(基于TCP服务) Server端 package com.bierce.io.netty.simple; import io.netty.bootstrap.ServerBootstrap; import io.netty.buffer.ByteBuf; import io.netty.buffer.Unpooled; import io.netty.channel.*; import io.netty.channel.nio.NioEventLoopGro…

使用动态IP是否会影响网络

今天我们要谈论的话题是关于动态IP和网络的关系。也许有些小伙伴对这个概念还比较陌生&#xff0c;但别担心&#xff0c;我会简单明了的给你理清楚。让我们一起看看动态IP到底能否影响到网络。 首先&#xff0c;我们先来搞明白什么是动态IP。在互联网世界中&#xff0c;每一个连…

跨越边界:从前端切图仔走进iOS开发(Swift版--上集)

本文简介 点赞 关注 收藏 学会了 本文将以前端开发者的视角&#xff0c;和各位工友进入iOS开发的世界。 本文以实战为导向&#xff0c;快速掌握iOS开发这个技能。 无论你是想要扩展技能领域&#xff0c;还是对iOS开发充满好奇&#xff0c;花一个下午学习本文都能打开iOS开…

【consul】

consul 一、什么是服务注册与发现1.11.2 二、 什么是consul2.1定义2.2特性2.2.1服务注册与发现&#xff1a;2.2.2健康检查&#xff1a;2.2.3Key/Value存储&#xff1a; 三、consul部署-datacenter &#xff1a;指定数据中心名称&#xff0c;默认是dc1。consul &#xff1a;指定…

flask获取请求对象的get和post参数

前言 get请求参数是在URL里面的&#xff0c;post请求参数是放在请求头里面的 get请求&#xff1a; index_page.route("/get") def get():var_a request.args.get("a", "jarvis")return "request:%s,params:%s,var_a:%s" %(request…

接口自动化如何封装mysql操作

数据查询类封装 1. 功能分析 可以连接不同sql数据库查一条数据&#xff0c;多条数据可以获取不同格式的数据 2. 封装成数据库查询类 封装思路: 数据库查询模块有多个功能&#xff0c;且需要复用&#xff0c;所以封装成类创建对象方法实现各种查询在构造方法中创建连…

Word中对象方法(Methods)的理解及示例(上)

【分享成果&#xff0c;随喜正能量】奋斗没有终点,任何时候都是一个起点&#xff0c;沉潜是为了蓄势待发&#xff0c;沉潜是为了等待因缘。鲸豚沉潜于大海&#xff0c;幽兰深藏于山谷&#xff0c;能够经得起沉潜的人&#xff0c;才会有更高的成就。正如一年的树木只能当柴烧&am…

基于Jenkins自动打包并部署docker环境

目录 1、安装docker-ce 2、阿里云镜像加速器 3、构建tomcat 基础镜像 4、构建一个Maven项目 实验环境 操作系统 IP地址 主机名 角色 CentOS7.5 192.168.200.111 git git服务器 CentOS7.5 192.168.200.112 Jenkins git客户端 jenkins服务器 CentOS7.5 192.168…

TCP最大连接数问题总结

最大TCP连接数量限制有&#xff1a;可用端口号数量、文件描述符数量、线程、内存、CPU等。每个TCP连接都需要以下资源&#xff0c;如图所示&#xff1a; 1、可用端口号限制 Q&#xff1a;一台主机可以有多少端口号&#xff1f;端口号与TCP连接&#xff1f;是否能修改&#x…

Wireshark数据抓包分析之互联网协议(IP协议)

一、实验目的&#xff1a; 通过wireshark抓包分析IP协议的具体内容 二、预备知识&#xff1a; 1.IP地址存在的意义&#xff0c;就是为了弥补mac地址的不足&#xff0c;用于区分不同的网络 2.还有一些ip协议、ip数据包这些东西 三、网络拓扑 四、实验过程&#xff1a; part1&…

Docker容器与虚拟化技术:Gitlab账户注册

目录 一、实验 1.gitlab 一、实验 1.gitlab (1) 概念 GitLab 是一个用于仓库管理系统的开源项目&#xff0c;使用Git作为代码管理工具&#xff0c;并在此基础上搭建起来的Web服务。 &#xff08;2&#xff09;官网 The DevSecOps Platform | GitLab &#xff08;3&#…

OpenAI推出GPT-3.5Turbo微调功能并更新API;Midjourney更新局部绘制功能

&#x1f989; AI新闻 &#x1f680; OpenAI推出GPT-3.5Turbo微调功能并更新API&#xff0c;将提供GPT-4微调功能 摘要&#xff1a;OpenAI宣布推出GPT-3.5Turbo微调功能&#xff0c;并更新API&#xff0c;使企业和开发者能够定制ChatGPT&#xff0c;达到或超过GPT-4的能力。通…

uniapp - 实现卡片式胶囊单选后右上角出现 “√“ 对勾对号选中效果功能,适用于小程序h5网页app全平台通用(一键复制组件源码,开箱即用!)

效果图 uniapp全平台兼容(小程序/h5网页/app)实现点击选择后,右上角出现 √ 对号效果(角标形式展现),功能组件, 改个样式,直接复制使用该组件。 组件源码 在 components 组件文件夹下,随便建立一个 .vue 文件,一键复制下方源码。

Centos7查看磁盘和CUP统计信息iostat命令

Centos7查看磁盘和CUP统计信息iostat命令 Centos7内存高|查看占用内存命令 docker实战(一):centos7 yum安装docker docker实战(二):基础命令篇 docker实战(三):docker网络模式(超详细) docker实战(四):docker架构原理 docker实战(五):docker镜像及仓库配置 docker实战(六…

如何在App里拉起小程序?

什么是小程序运行时框架&#xff1f; FinClip 的小程序编程模型是分为多个页面&#xff0c;每个页面有自己的 template、CSS 和 JS&#xff0c;实际在运行的时候&#xff0c;业务逻辑的 JS 代码是运行在独立的 JavaScript 引擎中&#xff0c;每个页面的 template 和 CSS 是运行…

vue组件的scope 以及 如何样式穿透

个人复习&#xff01;&#xff01;&#xff01; 有什么用 让当前组件的样式不会修改到其它地方的样式&#xff0c;使用了data-v-hash的方式来使css有了它对应模块的标识 实现原理 1、给HTML的dom节点添加一个不重复的data属性(例如: data-v-5558831a)来唯一标识这个dom 元素…

Linux下彻底卸载jenkins

文章目录 1、停服务进程2、查找安装目录3、删掉相关目录4、确认已完全删除 1、停服务进程 查看jenkins服务是否在运行&#xff0c;如果在运行&#xff0c;停掉 ps -ef|grep jenkins kill -9 XXX2、查找安装目录 find / -name "jenkins*"3、删掉相关目录 # 删掉相…

Prompt本质解密及Evaluation实战(一)

一、基于evaluation的prompt使用解析 基于大模型的应用评估与传统应用程序的评估不太一样&#xff0c;特别是基于GPT系列或者生成式语言模型&#xff0c;因为模型生成的内容与传统意义上所说的内容或者标签不太一样。 以下是借用了ChatGPT官方的evaluation指南提出的对结果的具…