mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-07 08:57:19 +08:00
一万
GitHub
parent
0fb7b5e983
commit
9ddf449ea7
@ -111,7 +111,7 @@ let classOption = reactive({
|
||||
|
||||
.warp {
|
||||
width: 95%;
|
||||
height: 230px;
|
||||
height: 215px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@ -28,7 +28,7 @@ let map: MapConfigureInter;
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const mapSet: mapInter = reactive({
|
||||
const mapSet = reactive({
|
||||
loading: deviceDetection() ? false : true
|
||||
});
|
||||
|
||||
@ -138,7 +138,7 @@ onUnmounted(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#mapview {
|
||||
height: 100vh;
|
||||
height: calc(100vh - 86px);
|
||||
}
|
||||
|
||||
:deep(.amap-marker-label) {
|
||||
|
||||
@ -74,9 +74,18 @@ const transitionMain = defineComponent({
|
||||
v-if="keepAlive"
|
||||
:include="usePermissionStoreHook().cachePageList"
|
||||
>
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
<component
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
class="main-content"
|
||||
/>
|
||||
</keep-alive>
|
||||
<component v-else :is="Component" :key="route.fullPath" />
|
||||
<component
|
||||
v-else
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
class="main-content"
|
||||
/>
|
||||
</transitionMain>
|
||||
</el-scrollbar>
|
||||
<div v-else>
|
||||
@ -85,9 +94,18 @@ const transitionMain = defineComponent({
|
||||
v-if="keepAlive"
|
||||
:include="usePermissionStoreHook().cachePageList"
|
||||
>
|
||||
<component :is="Component" :key="route.fullPath" />
|
||||
<component
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
class="main-content"
|
||||
/>
|
||||
</keep-alive>
|
||||
<component v-else :is="Component" :key="route.fullPath" />
|
||||
<component
|
||||
v-else
|
||||
:is="Component"
|
||||
:key="route.fullPath"
|
||||
class="main-content"
|
||||
/>
|
||||
</transitionMain>
|
||||
</div>
|
||||
</template>
|
||||
@ -108,4 +126,8 @@ const transitionMain = defineComponent({
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -65,11 +65,6 @@ ul {
|
||||
}
|
||||
}
|
||||
|
||||
// main-container global css
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login,
|
||||
.register {
|
||||
width: 100vw;
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
transition: margin-left 0.28s;
|
||||
margin-left: $sideBarWidth;
|
||||
position: relative;
|
||||
background: #f0f2f5;
|
||||
@media screen and (min-width: 150px) and (max-width: 420px) {
|
||||
.app-main .el-scrollbar__view:first-child {
|
||||
overflow-y: hidden;
|
||||
|
||||
@ -5,7 +5,7 @@ import menuDynamic from "./menuDynamic.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="margin: 10px">
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="10">
|
||||
<!-- 基本使用 -->
|
||||
|
||||
@ -3,7 +3,7 @@ import { ReNormalCountTo, ReboundCountTo } from "/@/components/ReCountTo";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="margin: 10px">
|
||||
<div>
|
||||
<el-row :gutter="24">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<el-card shadow="always">
|
||||
|
||||
@ -25,7 +25,7 @@ const onCropper = (): void => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div style="margin: 10px">
|
||||
<div>
|
||||
<div class="cropper-container">
|
||||
<Cropper ref="refCropper" :width="'40vw'" :src="img" />
|
||||
<img :src="cropperImg" class="croppered" v-if="cropperImg" />
|
||||
|
||||
@ -3,14 +3,11 @@ import { Amap } from "/@/components/ReMap";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="map">
|
||||
<Amap />
|
||||
</div>
|
||||
<Amap />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 89vh;
|
||||
.main-content {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -110,10 +110,6 @@ function changeDirection(val) {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -23,12 +23,7 @@ const selectedVal = ({ left, right }): void => {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card
|
||||
class="box-card"
|
||||
style="margin: 10px"
|
||||
v-for="(item, key) in dataLists"
|
||||
:key="key"
|
||||
>
|
||||
<el-card class="box-card" v-for="(item, key) in dataLists" :key="key">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>{{ item.title }}</span>
|
||||
@ -44,3 +39,9 @@ const selectedVal = ({ left, right }): void => {
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -41,12 +41,11 @@ const settingTB: ContextProps = reactive({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$W: 100%;
|
||||
$H: 80vh;
|
||||
$H: 70vh;
|
||||
|
||||
.split-pane {
|
||||
width: 98%;
|
||||
width: 70vw;
|
||||
height: $H;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
color: #fff;
|
||||
|
||||
@ -86,9 +86,8 @@ onMounted(() => {
|
||||
|
||||
<style scoped>
|
||||
#LF-Turbo {
|
||||
width: 100vw;
|
||||
height: 88.5vh;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
}
|
||||
|
||||
.logic-flow-view {
|
||||
@ -138,4 +137,8 @@ onMounted(() => {
|
||||
height: 85vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<p>{{ $t("message.hsmenu1") }}</p>
|
||||
<router-view>
|
||||
<template #default="{ Component, route }">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<p>{{ $t("message.hsmenu2") }}</p>
|
||||
<el-input v-model="input" />
|
||||
</div>
|
||||
|
||||
@ -14,7 +14,7 @@ function changRole(value) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<el-radio-group v-model="auth" @change="changRole">
|
||||
<el-radio-button label="admin"></el-radio-button>
|
||||
<el-radio-button label="test"></el-radio-button>
|
||||
|
||||
@ -22,7 +22,7 @@ function changRole() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<div>
|
||||
<h4>
|
||||
当前角色：
|
||||
<span style="font-size: 26px">{{ purview }}</span>
|
||||
|
||||
@ -197,7 +197,7 @@ function handleClose() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dict-container">
|
||||
<div>
|
||||
<!-- 工具栏 -->
|
||||
<vxe-toolbar>
|
||||
<template #buttons>
|
||||
@ -309,10 +309,6 @@ function handleClose() {
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dict-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.vxe-input + .vxe-button,
|
||||
.vxe-input + .vxe-button--dropdown,
|
||||
.vxe-button + .vxe-button,
|
||||
@ -324,6 +320,14 @@ function handleClose() {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.vxe-toolbar.size--medium {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.vxe-table--render-default.size--medium {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.vxe-button.size--medium.type--button {
|
||||
margin-right: 0.07em;
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@ const gridOptions = reactive({
|
||||
border: true,
|
||||
resizable: true,
|
||||
keepSource: true,
|
||||
height: 500,
|
||||
height: 578,
|
||||
printConfig: {},
|
||||
importConfig: {},
|
||||
exportConfig: {},
|
||||
@ -162,33 +162,6 @@ const gridOptions = reactive({
|
||||
sex: "Man ",
|
||||
age: 35,
|
||||
address: "Guangzhou"
|
||||
},
|
||||
{
|
||||
id: 100011,
|
||||
name: "Test11",
|
||||
nickname: "T11",
|
||||
role: "Test",
|
||||
sex: "Women ",
|
||||
age: 26,
|
||||
address: "vxe-table 从入门到放弃"
|
||||
},
|
||||
{
|
||||
id: 100012,
|
||||
name: "Test12",
|
||||
nickname: "T12",
|
||||
role: "Develop",
|
||||
sex: "Man ",
|
||||
age: 34,
|
||||
address: "Guangzhou"
|
||||
},
|
||||
{
|
||||
id: 100013,
|
||||
name: "Test13",
|
||||
nickname: "T13",
|
||||
role: "Test",
|
||||
sex: "Women ",
|
||||
age: 22,
|
||||
address: "Shenzhen"
|
||||
}
|
||||
];
|
||||
resolve({
|
||||
@ -238,5 +211,5 @@ const gridOptions = reactive({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vxe-grid v-bind="gridOptions" style="width: 98%"></vxe-grid>
|
||||
<vxe-grid v-bind="gridOptions"></vxe-grid>
|
||||
</template>
|
||||
|
||||
@ -6,12 +6,10 @@ import {
|
||||
ReLine,
|
||||
ReBar
|
||||
} from "/@/components/ReCharts/index";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import { ref, shallowRef, computed, onBeforeMount } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
const date: Date = new Date();
|
||||
let loading = ref<boolean>(true);
|
||||
const componentList = shallowRef([]);
|
||||
|
||||
setTimeout(() => {
|
||||
loading.value = !loading.value;
|
||||
@ -27,56 +25,6 @@ let greetings = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (useAppStoreHook().device === "mobile") {
|
||||
componentList.value = [
|
||||
{
|
||||
width: "20em",
|
||||
title: "GitHub饼图信息",
|
||||
component: RePie
|
||||
},
|
||||
{
|
||||
width: "20em",
|
||||
title: "GitHub折线图信息",
|
||||
component: ReLine
|
||||
},
|
||||
{
|
||||
width: "20em",
|
||||
title: "GitHub柱状图信息",
|
||||
component: ReBar
|
||||
}
|
||||
];
|
||||
} else {
|
||||
componentList.value = [
|
||||
{
|
||||
width: "43em",
|
||||
title: "GitHub信息",
|
||||
component: ReGithub
|
||||
},
|
||||
{
|
||||
width: "43em",
|
||||
title: "GitHub滚动信息",
|
||||
component: ReInfinite
|
||||
},
|
||||
{
|
||||
width: "28.28em",
|
||||
title: "GitHub饼图信息",
|
||||
component: RePie
|
||||
},
|
||||
{
|
||||
width: "28.28em",
|
||||
title: "GitHub折线图信息",
|
||||
component: ReLine
|
||||
},
|
||||
{
|
||||
width: "28.28em",
|
||||
title: "GitHub柱状图信息",
|
||||
component: ReBar
|
||||
}
|
||||
];
|
||||
}
|
||||
});
|
||||
|
||||
const openDepot = (): void => {
|
||||
window.open("https://github.com/xiaoxian521/vue-pure-admin");
|
||||
};
|
||||
@ -95,27 +43,97 @@ const openDepot = (): void => {
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-space class="space" wrap size="large">
|
||||
<el-skeleton
|
||||
v-for="(item, key) in componentList"
|
||||
:key="key"
|
||||
animated
|
||||
:rows="7"
|
||||
:loading="loading"
|
||||
:class="$style.size"
|
||||
:style="{ width: item.width }"
|
||||
<el-row :gutter="24" style="margin: 20px">
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<template #default>
|
||||
<div
|
||||
:class="['echart-card', $style.size]"
|
||||
:style="{ width: item.width }"
|
||||
>
|
||||
<h4>{{ item.title }}</h4>
|
||||
<component :is="item.component"></component>
|
||||
</div>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-space>
|
||||
<el-skeleton animated :rows="7" :loading="false">
|
||||
<template #default>
|
||||
<el-card>
|
||||
<h4>GitHub信息</h4>
|
||||
<ReGithub />
|
||||
</el-card>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<el-skeleton animated :rows="7" :loading="false">
|
||||
<template #default>
|
||||
<el-card>
|
||||
<h4>GitHub滚动信息</h4>
|
||||
<ReInfinite />
|
||||
</el-card>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<el-skeleton animated :rows="7" :loading="false">
|
||||
<template #default>
|
||||
<el-card>
|
||||
<h4>GitHub饼图信息</h4>
|
||||
<RePie />
|
||||
</el-card>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="8"
|
||||
:xl="8"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<el-skeleton animated :rows="7" :loading="false">
|
||||
<template #default>
|
||||
<el-card>
|
||||
<h4>GitHub折线图信息</h4>
|
||||
<ReLine />
|
||||
</el-card>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
|
||||
<el-col
|
||||
:xs="24"
|
||||
:sm="24"
|
||||
:md="24"
|
||||
:lg="8"
|
||||
:xl="1"
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<el-skeleton animated :rows="7" :loading="false">
|
||||
<template #default>
|
||||
<el-card>
|
||||
<h4>GitHub柱状图信息</h4>
|
||||
<ReBar />
|
||||
</el-card>
|
||||
</template>
|
||||
</el-skeleton>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -126,8 +144,11 @@ const openDepot = (): void => {
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.top-content {
|
||||
@ -155,22 +176,5 @@ const openDepot = (): void => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.space {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
padding: 10px;
|
||||
|
||||
.echart-card {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user