1Panel-dev/1Panel
1
1
Fork 0
mirror of https://github.com/1Panel-dev/1Panel.git synced 2025-12-18 13:29:03 +08:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 样式修改

Browse source
This commit is contained in:
zhengkunwang223 2023-02-01 22:19:00 +08:00 • committed by zhengkunwang223
parent eb046090a5
commit e5163fee62
8 changed files with 76 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/app-layout/menu/index.vue
View file

@ -21,7 +21,7 @@
> >
<SubItem :menuList="routerMenus"></SubItem> <SubItem :menuList="routerMenus"></SubItem>
<el-menu-item> <el-menu-item>
<el-icon> <el-icon @click="logout">
<SvgIcon :iconName="'p-logout'" :className="'svg-icon'"></SvgIcon> <SvgIcon :iconName="'p-logout'" :className="'svg-icon'"></SvgIcon>
</el-icon> </el-icon>
<template #title> <template #title>

51
frontend/src/components/app-status/index.vue
View file

@ -1,14 +1,13 @@
<template> <template>
<div> <div>
<div class="a-content" v-if="data.isExist"> <div class="a-card" v-if="data.isExist">
<el-card class="a-card"> <el-card>
<el-row :gutter="20"> <div>
<el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="6"> <el-tag effect="dark" type="success">{{ data.app }}</el-tag>
<el-tag effect="dark" type="success">{{ data.app }}</el-tag> <Status class="status-content" :key="refresh" :status="data.status"></Status>
<Status class="status-content" :key="refresh" :status="data.status"></Status> <el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
<el-tag class="status-content">{{ $t('app.version') }}:{{ data.version }}</el-tag>
</el-col> <span class="buttons">
<el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="4">
<el-button type="primary" v-if="data.status != 'Running'" link @click="onOperate('up')"> <el-button type="primary" v-if="data.status != 'Running'" link @click="onOperate('up')">
{{ $t('app.up') }} {{ $t('app.up') }}
</el-button> </el-button>
@ -28,16 +27,19 @@
> >
{{ $t('commons.button.set') }} {{ $t('commons.button.set') }}
</el-button> </el-button>
</el-col> </span>
</el-row> </div>
</el-card> </el-card>
</div> </div>
<div v-else> <div v-else>
<el-alert :closable="false" :title="$t('app.checkInstalledWarn', [data.app])" type="info"> <div class="app-warn">
<div>
<span>{{ $t('app.checkInstalledWarn', [data.app]) }}</span>
</div>
<el-link icon="Position" @click="goRouter('/apps')" type="primary"> <el-link icon="Position" @click="goRouter('/apps')" type="primary">
{{ $t('database.goInstall') }} {{ $t('database.goInstall') }}
</el-link> </el-link>
</el-alert> </div>
</div> </div>
</div> </div>
</template> </template>
@ -122,12 +124,15 @@ onMounted(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.a-card { .a-card {
font-size: 14px; font-size: 12px;
height: 60px;
}
.a-content { .el-card {
height: 50px; --el-card-padding: 12px;
.buttons {
margin-left: 100px;
}
}
} }
body { body {
@ -137,4 +142,14 @@ body {
.status-content { .status-content {
margin-left: 50px; margin-left: 50px;
} }
.app-warn {
text-align: center;
margin-top: 200px;
span {
font-weight: 500;
font-size: 16px;
color: #bbbfc4;
}
}
</style> </style>

2
frontend/src/layout/index.scss
View file

@ -14,7 +14,7 @@
} }
.el-main { .el-main {
box-sizing: border-box; box-sizing: border-box;
padding: 20px 33px; // padding: 20px 33px;
overflow-x: hidden; overflow-x: hidden;
background-color: #f4f4f4; background-color: #f4f4f4;

13
frontend/src/layout/index.vue
View file

@ -6,17 +6,10 @@
</Menu> </Menu>
</el-aside> </el-aside>
<el-container> <el-container>
<el-header>
<Header>
<slot name="header"></slot>
</Header>
</el-header>
<el-main> <el-main>
<!-- <Content> -->
<div> <div>
<View></View> <View></View>
</div> </div>
<!-- </Content> -->
</el-main> </el-main>
<el-footer> <el-footer>
<Footer> <Footer>
@ -28,15 +21,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// import { computed } from 'vue';
import Menu from './layout-menu.vue'; import Menu from './layout-menu.vue';
import Header from './layout-header.vue';
import Footer from './layout-footer.vue'; import Footer from './layout-footer.vue';
import View from './layout-view.vue'; import View from './layout-view.vue';
// import Content from './layout-content.vue';
// import { GlobalStore } from '@/store';
// const globalStore = GlobalStore();
// const themeConfig = computed(() => globalStore.themeConfig);
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

10
frontend/src/layout/layout-content.vue
View file

@ -1,8 +1,5 @@
<template> <template>
<div class="main-box"> <div class="main-box">
<div class="content-container__header" v-if="slots.header">
<slot name="header"></slot>
</div>
<div class="content-container__app" v-if="slots.app"> <div class="content-container__app" v-if="slots.app">
<slot name="app"></slot> <slot name="app"></slot>
</div> </div>
@ -90,8 +87,15 @@ const showBack = computed(() => {
<style lang="scss"> <style lang="scss">
@use '@/styles/mixins.scss' as *; @use '@/styles/mixins.scss' as *;
.content-container__app {
margin-top: 20px;
}
.content-container__search { .content-container__search {
margin-top: 20px; margin-top: 20px;
.el-card {
--el-card-padding: 12px;
}
} }
.content-container__title { .content-container__title {

3
frontend/src/layout/layout-header.vue
View file

@ -1,3 +0,0 @@
<template>
<slot></slot>
</template>

64
frontend/src/views/app-store/detail/index.vue
View file

@ -3,9 +3,11 @@
<template #main> <template #main>
<div class="brief"> <div class="brief">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="3"> <div>
<el-avatar shape="square" :size="180" :src="'data:image/png;base64,' + app.icon" /> <el-col :span="3">
</el-col> <el-avatar shape="square" :size="180" :src="'data:image/png;base64,' + app.icon" />
</el-col>
</div>
<el-col :span="18"> <el-col :span="18">
<div class="detail"> <div class="detail">
<div class="name"> <div class="name">
@ -51,32 +53,34 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="divider"></div> <div class="divider"></div>
<el-row> <div>
<el-col :span="12"> <el-row>
<div class="descriptions"> <el-col :span="12">
<el-descriptions direction="vertical"> <div class="descriptions">
<el-descriptions-item :label="$t('app.appWebsite')"> <el-descriptions direction="vertical">
<el-link @click="toLink(app.website)"> <el-descriptions-item>
<el-icon><OfficeBuilding /></el-icon> <el-link @click="toLink(app.website)">
<span>{{ $t('app.appOfficeWebsite') }}</span> <el-icon><OfficeBuilding /></el-icon>
</el-link> <span>{{ $t('app.appOfficeWebsite') }}</span>
</el-descriptions-item> </el-link>
<el-descriptions-item :label="$t('app.doc')"> </el-descriptions-item>
<el-link @click="toLink(app.document)"> <el-descriptions-item>
<el-icon><Document /></el-icon> <el-link @click="toLink(app.document)">
<span>{{ $t('app.document') }}</span> <el-icon><Document /></el-icon>
</el-link> <span>{{ $t('app.document') }}</span>
</el-descriptions-item> </el-link>
<el-descriptions-item label="Github"> </el-descriptions-item>
<el-link @click="toLink(app.github)"> <el-descriptions-item>
<el-icon><Link /></el-icon> <el-link @click="toLink(app.github)">
<span>{{ $t('app.github') }}</span> <el-icon><Link /></el-icon>
</el-link> <span>{{ $t('app.github') }}</span>
</el-descriptions-item> </el-link>
</el-descriptions> </el-descriptions-item>
</div> </el-descriptions>
</el-col> </div>
</el-row> </el-col>
</el-row>
</div>
</div> </div>
<div v-loading="loadingDetail" style="margin-left: -32px"> <div v-loading="loadingDetail" style="margin-left: -32px">
<v-md-preview :text="appDetail.readme"></v-md-preview> <v-md-preview :text="appDetail.readme"></v-md-preview>
@ -142,7 +146,7 @@ onMounted(() => {
<style lang="scss"> <style lang="scss">
.brief { .brief {
height: 30vh; // height: 30vh;
.name { .name {
span { span {

1
frontend/src/views/website/website/index.vue
View file

@ -8,7 +8,6 @@
}, },
]" ]"
/> />
<br />
<LayoutContent :title="$t('website.website')" v-loading="loading"> <LayoutContent :title="$t('website.website')" v-loading="loading">
<template #app> <template #app>
<AppStatus <AppStatus