西安网站优化排名,网站怎么排版,wordpress 论坛 小程序,网站做互动1. 前言
前面我不是说了要做一个图床吗#xff0c;现在在做ui。
我vue水平不够高#xff0c;大部分参考b站项目照猫画虎。 vue实战后台 我使用ts#xff0c;vite#xff0c;vue3进行了重构。 当然#xff0c;我对这些理解并不深刻#xff0c;许多代码都是游离于表面现在在做ui。
我vue水平不够高大部分参考b站项目照猫画虎。 vue实战后台 我使用tsvitevue3进行了重构。 当然我对这些理解并不深刻许多代码都是游离于表面仅仅给大家参考
2. 过程
2.1. 使用elemen ui进行导航制作。
这里直接用element ui菜单直接粘上去就可以几乎没有任何其他处理
templateel-menudefault-active2classel-menu-vertical-demo:collapseuseHeaderStore().tab.isCollapseopenhandleOpenclosehandleCloseimg classlogo src../..//src/assets/云盘上传.pngh1 classtitle{{useHeaderStore().tab.isCollapse? 图床:好玩图床}}/h1el-sub-menu v-foritem of currentMenu.items :indexitem.titletemplate #titleel-icon component :isitem.icon/component/el-iconspan{{item.title}}/span/templateel-menu-item clickclickMenu(cItem.path,cItem.title) v-forcItem of item.children :indexcItem.title el-iconcomponent :is cItem.icon/component/el-icon{{cItem.title}}/el-menu-item/el-sub-menu/el-menu
/template值得注意的是icon动态绑定的展示和vue2略有不同 el-icon component :isitem.icon/component//使用component :isitem.icon展示/el-icon2.2.head制作 header部分主要有一个折叠开关由于和左侧栏不是一个组件里我使用pinia进行数据传递。 大菠萝官网 templatediv classheader-containerdiv classl-contentel-button clickhandleMenu :iconMenu sizemini /!-- 面包屑 --el-breadcrumb separator/ stylemargin-left: 20pxel-breadcrumb-item v-foritem in tags :keyitem.path :to{ path: item.path }{{ item.title }}/el-breadcrumb-item/el-breadcrumb/divdiv classr-contentel-dropdownspan classel-dropdown-linkimg classuser src../assets/meiyangyang.jpg/spantemplate #dropdownel-dropdown-menuel-dropdown-item退出/el-dropdown-item/el-dropdown-menu/template/el-dropdown/div/div
/templatescript langts 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;
});
/script2.3.首页制作
两个表格
el-card classbox-carddiv classuserimg src../assets/meiyangyang.jpgdiv classuser-infop classnameAdmin/pp classaccess超级管理员/p/div/divdiv classlogin-infop上次登录时间 span2021-07-25/span/pp上次登录地点 span上海/span/p/div/el-cardel-card stylemargin-top: 20px; height: 410pxel-table :datatableData stylewidth: 100%el-table-column propdate label文件id /el-table-column propname label上传日期 /el-table-column propaddress label本月引用 /el-table-column propallLinks label总引用 //el-table/el-card
这个直接element ui贴贴就完了。
6个颜色卡 6个盒子这个可能css难写点我基本都是抄的给不出什么建议。
div classnumel-card v-foritem in labelDate :keyitem.label :body-style{display: flex,padding: 0,height : 80px}div classicon :style{backgroundColor:item.color}el-icon size30px styletext-align: centercomponent :isitem.icon /component/el-icon/divdiv classdetailsp classsum{{item.sum}}次/pp classlabel{{item.label}}/p/div/el-card/divstyle langless 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
图表制作。
图标是使用echart插件制作的很好用推荐。 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);后面暂时没了最后写完的话我会把源码放出来
