mirror of
https://gitee.com/fantastic-admin/basic.git
synced 2024-12-05 21:47:55 +08:00
更新演示站控制台页面
This commit is contained in:
hooray
parent
af9eb0cb06
commit
47e6fdacef
@ -21,20 +21,6 @@
|
||||
<span class="title">下载<br>基础版</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="discoveryInfo.dialogVisible" title="One-step-admin 正式发布" width="600px" center :close-on-click-modal="false">
|
||||
<div style="text-align: center; margin-bottom: 20px;">One-step-admin 是一款<b>干啥都快人一步</b>的 Vue 中后台管理系统框架</div>
|
||||
<el-carousel trigger="click" indicator-position="none" arrow="always" :autoplay="false" height="330px">
|
||||
<el-carousel-item v-for="item in discoveryInfo.data" :key="item">
|
||||
<img :src="item.img" style="cursor: pointer; width: 100%; margin: auto;" @click="discoveryInfo.imageVisible = true; discoveryInfo.imagePreview = [item.img]">
|
||||
<div style="text-align: center; margin-top: 20px;">{{ item.text }}</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<el-image-viewer v-if="discoveryInfo.imageVisible" :url-list="discoveryInfo.imagePreview" @close="discoveryInfo.imageVisible = false" />
|
||||
<template #footer>
|
||||
<el-button @click="discoveryInfo.dialogVisible = false">不用了</el-button>
|
||||
<el-button type="primary" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/`)">去看看</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -47,19 +33,6 @@ setTimeout(() => {
|
||||
isActived.value = false
|
||||
}, 5000)
|
||||
|
||||
const discoveryInfo = ref({
|
||||
dialogVisible: true,
|
||||
imageVisible: false,
|
||||
imagePreview: [],
|
||||
data: [
|
||||
{ img: `https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/intro-1.gif`, text: '摆脱传统后台框架路由跳转的交互，将每个模块以窗口的形式展示在同一个界面中，让使用人员可以做到跨模块的多线操作。' },
|
||||
{ img: `https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/intro-2.gif`, text: '窗口默认宽度为 800px ，可以在项目中进行调整，也可以通过最大化按钮将窗口最大化展示，以便展示更多信息。' },
|
||||
{ img: `https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/intro-3.gif`, text: '提供的预览界面可以帮助使用人员快速定位到需要操作的窗口。' },
|
||||
{ img: `https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/intro-4.gif`, text: '可勾选 2 到 4 个窗口平均分布在页面中，专注于所勾选的窗口进行操作。' },
|
||||
{ img: `https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/intro-5.gif`, text: '快速调整窗口的展示顺序。' }
|
||||
]
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
proxy.$notify({
|
||||
type: 'success',
|
||||
|
||||
@ -14,156 +14,129 @@
|
||||
</page-header>
|
||||
<el-row :gutter="20" style="margin: 0 10px;">
|
||||
<el-col :lg="8">
|
||||
<page-main title="框架信息" style="margin: 0 0 20px;">
|
||||
<div class="fa-info">
|
||||
<img :src="`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/logo.png`" style="width: 150px;">
|
||||
<h1>Fantastic-admin</h1>
|
||||
<el-table :data="diff" row-key="prop" size="mini" border stripe>
|
||||
<el-table-column label="基础版" align="center">
|
||||
<template #default="scope">
|
||||
<div v-for="(item, index) in scope.row.basic" :key="index">{{ item }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="专业版" align="center">
|
||||
<template #default="scope">
|
||||
<div v-for="(item, index) in scope.row.pro" :key="index">{{ item }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<page-main style="margin: 0;">
|
||||
<div class="ecology vue">
|
||||
<div class="main">
|
||||
<img src="https://v3.cn.vuejs.org/logo.png" style="width: 30%;">
|
||||
<h1>Fantastic-template</h1>
|
||||
<h2>一款开箱即用的 Vue 项目模版</h2>
|
||||
<el-button plain icon="el-icon-link" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-template`)">访问官网</el-button>
|
||||
</div>
|
||||
<el-divider border-style="dashed" />
|
||||
<ul>
|
||||
<li v-for="item in fantasticTemplateInfo.feature" :key="item">{{ item }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</page-main>
|
||||
</el-col>
|
||||
<el-col :lg="16">
|
||||
<el-row :gutter="20" style="margin: 0 -10px 20px;">
|
||||
<el-col :md="4">
|
||||
<div class="icon-box icon-box-1" @click="onIconClick('收藏')">
|
||||
<el-icon><el-icon-star /></el-icon>
|
||||
<div class="title">收藏</div>
|
||||
<el-col :lg="8">
|
||||
<page-main style="margin: 0;">
|
||||
<div class="ecology fa">
|
||||
<div class="main">
|
||||
<img :src="`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/logo.png`" style="width: 30%;">
|
||||
<h1>Fantastic-admin</h1>
|
||||
<h2>一款开箱即用的 Vue 中后台管理系统框架</h2>
|
||||
<el-button plain icon="el-icon-link" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin`)">访问官网</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="4">
|
||||
<div class="icon-box icon-box-2" @click="onIconClick('通知')">
|
||||
<el-icon><el-icon-bell /></el-icon>
|
||||
<div class="title">通知</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="4">
|
||||
<div class="icon-box icon-box-3" @click="onIconClick('图集')">
|
||||
<el-icon><el-icon-picture /></el-icon>
|
||||
<div class="title">图集</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="4">
|
||||
<div class="icon-box icon-box-4" @click="onIconClick('拍照')">
|
||||
<el-icon><el-icon-camera /></el-icon>
|
||||
<div class="title">拍照</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="4">
|
||||
<div class="icon-box icon-box-5" @click="onIconClick('视频')">
|
||||
<el-icon><el-icon-video-camera /></el-icon>
|
||||
<div class="title">视频</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :md="4">
|
||||
<div class="icon-box icon-box-6" @click="onIconClick('购物')">
|
||||
<el-icon><el-icon-goods /></el-icon>
|
||||
<div class="title">购物</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<page-main title="应用场景" style="margin: 0 0 20px;">
|
||||
<div class="question">
|
||||
<ol class="answer">
|
||||
<li><span>没有前端开发人员的小型公司。</span>据了解，有些小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，直接要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
|
||||
<li><span>前端开发人员不足的中小型公司。</span>根据招聘网站统计，几乎所有公司都缺前端，其中有很大一部分中小型公司标配只有1-2名前端开发人员，而这些公司在开发中后台系统的时候，如果能有一套现成的中后台框架系统，不仅能提高项目开发效率，同时还大大减轻前端开发人员工作压力。</li>
|
||||
<li><span>项目型公司。</span>特点为项目多，周期短，甲方对页面布局和主题风格有绝对话语权，而通过专业版提供的 20 套页面布局和 6 款主题风格（共计 120 种）可应对绝大部分甲方需求，并且可自定义扩展主题风格的样式，实现高度定制化。</li>
|
||||
<li><span>产品型公司。</span>产品型公司最担心的就是产品开发中代码不可控的因素，本框架除了提供完善的开发文档和代码注释外，针对专业版用户还提供一对一的技术支持，确保开发人员尽可能理解整套框架源码的方方面面，为产品保驾护航。</li>
|
||||
<li><span>接私活的个人开发者。</span>手里有一套可高度定制化的中后台框架，什么项目都不用担心啦~</li>
|
||||
</ol>
|
||||
<el-divider border-style="dashed" />
|
||||
<el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
||||
<el-carousel-item v-for="(item, index) in fantasticAdminInfo.data" :key="item">
|
||||
<el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="fantasticAdminInfo.imageVisible = true; fantasticAdminInfo.index = index" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<el-image-viewer v-if="fantasticAdminInfo.imageVisible" :url-list="fantasticAdminInfo.data" :initial-index="fantasticAdminInfo.index" @close="fantasticAdminInfo.imageVisible = false" />
|
||||
</div>
|
||||
</page-main>
|
||||
<page-main title="优势" style="margin: 0;">
|
||||
<div class="question">
|
||||
<ol class="answer">
|
||||
<li><span>作者拥有10年+的前后端开发经验。</span>部分框架的作者由于天然缺少后端开发经验，可能会在设计框架的时候，很少或者没有考虑后端的实现逻辑，导致框架在实际使用中，业务场景无法落地，开发人员得通过修改源码自行实现业务。</li>
|
||||
<li><span>经历过数十个真实项目的打磨。</span>没用在真实业务场景中使用过的框架都是纸飞机，哪怕它提供的演示功能特别华丽。而本框架在作者就职的公司，已经稳定应用在电商、直播、OA、CRM、ERP等多个不同领域的中后台系统中。</li>
|
||||
<li><span>丰富的组件库。</span>除了支持 ElementUI 自带的组件外，框架还扩充了部分业务组件，以及第三方插件。借助以往的项目经验，提供最佳实践方案，方便开发人员直接使用。</li>
|
||||
<li><span>持续更新的业务应用静态页面。</span>通过项目积累，沉淀出数十个业务应用的静态页面，做到开发人员拿来即可使用，极大提升开发效率的同时，还省去了产品和设计人员的工作。</li>
|
||||
<li><span>长期维护。</span>无论是免费的基础版，还是付费的专业版，均提供长期维护。区别在于基础版侧重于稳定性维护，主要在修复 bug ，不定期增加新特性；专业版侧重于新特性开发，在确保稳定的基础上，会长期深挖中后台系统框架，持续产出可落地的特性或开发规范。</li>
|
||||
</ol>
|
||||
</el-col>
|
||||
<el-col :lg="8">
|
||||
<page-main style="margin: 0;">
|
||||
<div class="ecology osa">
|
||||
<div class="main">
|
||||
<img :src="`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/logo.png`" style="width: 30%;">
|
||||
<h1>One-step-admin</h1>
|
||||
<h2>一款干啥都快人一步的 Vue 中后台系统框架</h2>
|
||||
<el-button plain icon="el-icon-link" @click="open(`https://hooray.${locationOrigin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin`)">访问官网</el-button>
|
||||
</div>
|
||||
<el-divider border-style="dashed" />
|
||||
<el-carousel trigger="click" indicator-position="none" :interval="5000" height="250px">
|
||||
<el-carousel-item v-for="(item, index) in oneStepAdminInfo.data" :key="item">
|
||||
<el-image :src="item" fit="cover" style="cursor: pointer; width: 100%; height: 250px; margin: auto;" @click="oneStepAdminInfo.imageVisible = true; oneStepAdminInfo.index = index" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<el-image-viewer v-if="oneStepAdminInfo.imageVisible" :url-list="oneStepAdminInfo.data" :initial-index="oneStepAdminInfo.index" @close="oneStepAdminInfo.imageVisible = false" />
|
||||
</div>
|
||||
</page-main>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<page-main title="应用场景">
|
||||
<div class="question">
|
||||
<ol class="answer">
|
||||
<li><span>没有前端开发人员的小型公司。</span>据了解，有些小型公司没有前端开发人员，而这些公司在开发中后台系统的时候，直接要求后端开发人员来进行开发工作。所以借助 Vue 的易学习易上手特性，再加上本框架的加持，可以让后端开发人员能在短时间内转型成为全栈开发。</li>
|
||||
<li><span>前端开发人员不足的中小型公司。</span>根据招聘网站统计，几乎所有公司都缺前端，其中有很大一部分中小型公司标配只有1-2名前端开发人员，而这些公司在开发中后台系统的时候，如果能有一套现成的中后台框架系统，不仅能提高项目开发效率，同时还大大减轻前端开发人员工作压力。</li>
|
||||
<li><span>项目型公司。</span>特点为项目多，周期短，甲方对页面布局和主题风格有绝对话语权，而通过专业版提供的布局和主题风格，可应对绝大部分甲方需求，并且可自定义扩展主题风格的样式，实现高度定制化。</li>
|
||||
<li><span>产品型公司。</span>产品型公司最担心的就是产品开发中代码不可控的因素，本框架除了提供完善的开发文档和代码注释外，作者还提供一对一的技术支持，确保开发人员尽可能理解整套框架源码的方方面面，为产品保驾护航。</li>
|
||||
<li><span>个人开发者。</span>手里有一套可高度定制化的中后台框架，什么项目都不用担心啦~</li>
|
||||
</ol>
|
||||
</div>
|
||||
</page-main>
|
||||
<page-main title="优势">
|
||||
<div class="question">
|
||||
<ol class="answer">
|
||||
<li><span>作者拥有10年+的前后端开发经验。</span>部分框架的作者由于缺少后端开发经验，可能会在设计框架的时候，很少或者没有考虑后端的实现逻辑，导致框架在实际使用中，业务场景无法落地，开发人员得通过修改源码自行实现业务。</li>
|
||||
<li><span>经历过数十个真实项目的打磨。</span>没用在真实业务场景中使用过的框架都是纸飞机，哪怕它提供的演示功能特别华丽。而本框架在作者就职的公司，已经稳定应用在电商、直播、OA、CRM、ERP等多个不同领域的中后台系统中。</li>
|
||||
<li><span>丰富的组件库。</span>除了支持 ElementUI / Element Plus 自带的组件外，框架还扩充了部分业务组件，以及第三方插件。借助以往的项目经验，提供最佳实践方案，方便开发人员直接使用。</li>
|
||||
<li><span>持续更新的业务应用静态页面。</span>通过项目积累，沉淀出数十个业务应用的静态页面，做到开发人员拿来即可使用，极大提升开发效率的同时，还省去了产品和设计人员的工作。</li>
|
||||
<li><span>长期维护。</span>无论是免费的基础版，还是付费的专业版，均提供长期维护。区别在于基础版侧重于稳定性维护，主要在修复 bug ，不定期增加新特性；专业版侧重于新特性开发，在确保稳定的基础上，会长期深挖中后台系统框架，持续产出可落地的特性或开发规范。</li>
|
||||
</ol>
|
||||
</div>
|
||||
</page-main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
diff: [{
|
||||
basic: [
|
||||
'3 套页面布局',
|
||||
'1 款主题风格',
|
||||
'6 个侧边栏导航配置项',
|
||||
'支持外链导航',
|
||||
'支持全方位权限验证',
|
||||
'10+ 个基础组件',
|
||||
'提供少量扩展组件',
|
||||
'支持 Mock 数据',
|
||||
'团队代码规范',
|
||||
'需保留作者版权信息'
|
||||
],
|
||||
pro: [
|
||||
'20 套页面布局',
|
||||
'6 款主题风格',
|
||||
'10 个侧边栏导航配置项',
|
||||
'支持外链导航',
|
||||
'支持内嵌导航',
|
||||
'支持 Tab 标签栏',
|
||||
'支持全方位权限验证',
|
||||
'10+ 个基础组件',
|
||||
'提供完整扩展组件',
|
||||
'支持国际化',
|
||||
'支持 Mock 数据',
|
||||
'支持错误日志上报',
|
||||
'支持文件自动生成',
|
||||
'提供业务应用静态页面（长期扩充）',
|
||||
'团队代码规范',
|
||||
'可自定义版权信息',
|
||||
'提供一对一技术支持'
|
||||
]
|
||||
}],
|
||||
type: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
locationOrigin: () => location.origin,
|
||||
titlePrefix() {
|
||||
let arr = []
|
||||
switch (this.type) {
|
||||
case 1: arr = ['今天', '昨天']; break
|
||||
case 2: arr = ['本周', '上周']; break
|
||||
case 3: arr = ['本月', '上月']; break
|
||||
case 4: arr = ['今年', '去年']; break
|
||||
}
|
||||
return arr
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open(url) {
|
||||
window.open(url, 'top')
|
||||
},
|
||||
onIconClick(val) {
|
||||
this.$message({
|
||||
message: `你点击了：${val}`,
|
||||
type: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
const locationOrigin = location.origin
|
||||
|
||||
function open(url) {
|
||||
window.open(url, 'top')
|
||||
}
|
||||
|
||||
const fantasticTemplateInfo = ref({
|
||||
feature: [
|
||||
'默认集成 vue-router 和 pinia',
|
||||
'全局 SCSS 资源引入',
|
||||
'全局组件自动注册',
|
||||
'支持 SVG 图标，CSS 精灵图自动合成',
|
||||
'支持 mock 数据，可摆脱后端束缚独立开发',
|
||||
'支持 gzip / brotli 优化项目体积，提高加载速度',
|
||||
'结合 IDE 插件、ESlint 、stylelint 、Git 钩子，轻松实现团队代码规范'
|
||||
]
|
||||
})
|
||||
|
||||
const fantasticAdminInfo = ref({
|
||||
imageVisible: false,
|
||||
index: 0,
|
||||
data: [
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/preview1.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/preview2.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/preview3.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/preview4.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/preview5.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/fantastic-admin/preview6.png`
|
||||
]
|
||||
})
|
||||
|
||||
const oneStepAdminInfo = ref({
|
||||
imageVisible: false,
|
||||
index: 0,
|
||||
data: [
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/preview1.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/preview2.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/preview3.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/preview4.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/preview5.png`,
|
||||
`https://hooray.${location.origin.includes('gitee') ? 'gitee' : 'github'}.io/one-step-admin/preview6.png`
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -171,18 +144,52 @@ export default {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-text-emphasis-style: "❤";
|
||||
}
|
||||
.fa-info {
|
||||
.ecology {
|
||||
padding: 10px 0 0;
|
||||
text-align: center;
|
||||
h1 {
|
||||
margin: 10px auto 20px;
|
||||
&.vue {
|
||||
h1 {
|
||||
color: #41b883;
|
||||
}
|
||||
}
|
||||
&.fa {
|
||||
h1 {
|
||||
color: #e60000;
|
||||
}
|
||||
}
|
||||
&.osa {
|
||||
h1 {
|
||||
color: #67c23a;
|
||||
}
|
||||
}
|
||||
.main {
|
||||
text-align: center;
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
h1 {
|
||||
margin: 10px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.el-carousel {
|
||||
box-shadow: 0 0 5px 1px #ccc;
|
||||
}
|
||||
ul li {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
.question {
|
||||
.answer {
|
||||
margin: 20px 0 0;
|
||||
padding-left: 20px;
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: #aaa;
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
@ -197,57 +204,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-box {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
&-1 {
|
||||
color: #ffc069;
|
||||
&:hover {
|
||||
background-color: #ffc069;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
color: #b37feb;
|
||||
&:hover {
|
||||
background-color: #b37feb;
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
color: #95de64;
|
||||
&:hover {
|
||||
background-color: #95de64;
|
||||
}
|
||||
}
|
||||
&-4 {
|
||||
color: #ff85c0;
|
||||
&:hover {
|
||||
background-color: #ff85c0;
|
||||
}
|
||||
}
|
||||
&-5 {
|
||||
color: #ff9c6e;
|
||||
&:hover {
|
||||
background-color: #ff9c6e;
|
||||
}
|
||||
}
|
||||
&-6 {
|
||||
color: #282c34;
|
||||
&:hover {
|
||||
background-color: #282c34;
|
||||
}
|
||||
}
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
.title {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user